Bootstrap3でlessファイルをカスタマイズ、コンパイルする


#1. 目的

はじめてBootstrapを使ってWEBページをつくってみようとしました。

* CSSをカスタマイズのためにはコンパイルが必要ということに気づく
* lessって何？
* コンパイルできて、カスタマイズできる環境にまで　←ここまで

環境は、MacOSX 10.9.5

#2. Bootstrapを使う準備

[公式サイト](http://getbootstrap.com/)からソースコードのダウンロード。
ディレクトリ構造は以下のとおり。

```shell-session
/User/hogehoge/
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/
```

前もってコンパイルされたCSSがはいっています。
[Getting Started](http://getbootstrap.com/getting-started/#download)にあるBasicテンプレートをindex.htmlとしてコピーして
__/User/hogehoge/bootstrap/dist/__に置きましょう。

__/User/hogehoge/bootstrap/dist/__をApacheのドキュメントルートにして、
apacheを起動して、表示を確認してみましょう。

Hello Worldが表示されたらOKです。

#3. lessファイルをコンパイル

さて、ここからです。
cssをカスタマイズしたい場合、cssを直接修正するのではなく、lessフォルダにあるファイルを修正していきます。

## lessって何？

lessを使うとcssをプログラム的に実装することができます。

まずはドットインストールの[less入門講座](http://dotinstall.com/lessons/basic_less_v2)をみてみましょう。理解が体感できます。
[less公式サイト](http://lesscss.org/)もチェック

## lessファイルをコンパイルする環境を設定します

[Grunt](http://gruntjs.com/)を使います。
>Bootstrap uses Grunt for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.

bootstrapのソースコードをダウンロードして解凍すると

* Gruntfile.js

* package.json

の２ファイルが含まれています。これらを使います。

Grunt.jsは、サーバーサイドJavaScriptのNode.jsを使用したCUIのビルドツールです。 タスクを設定しておき、それらを自動化します。

### npm, node.jsのインストール

すでに導入済みであれば問題ないです。
[node.js](http://nodejs.org/)の公式サイトから、パッケージをダウンロードしてインストールします

* 参考
* [Installing node.js on OSX 10.9 Mavericks](http://coolestguidesontheplanet.com/installing-node-js-osx-10-9-mavericks/)

### grunt-cli のインストール

```shell-session

 npm install -g grunt-cli
```
　
### 依存パッケージのインストール

__/User/hogehoge/bootstrap/__ディレクトリで実行します。

```shell-session

 npm install
```
 npm は同じディレクトリにある package.json を参照して、自動的に必要な必要な依存プラグインをインストールします。
package.jsonを参照すると、以下のものがインストールされるようです。

```json
 "devDependencies": {
    "btoa": "~1.1.2",
    "glob": "~4.0.2",
    "grunt": "~0.4.5",
    "grunt-autoprefixer": "~0.7.6",
    "grunt-banner": "~0.2.3",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-contrib-concat": "~0.4.0",
    "grunt-contrib-connect": "~0.8.0",
    "grunt-contrib-copy": "~0.5.0",
    "grunt-contrib-csslint": "~0.2.0",
    "grunt-contrib-cssmin": "~0.10.0",
    "grunt-contrib-jade": "~0.12.0",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-less": "~0.11.3",
    "grunt-contrib-qunit": "~0.5.1",
    "grunt-contrib-uglify": "~0.5.0",
    "grunt-contrib-watch": "~0.6.1",
    "grunt-csscomb": "~2.0.1",
    "grunt-exec": "~0.4.5",
    "grunt-html-validation": "~0.1.18",
    "grunt-jekyll": "~0.4.2",
    "grunt-jscs-checker": "~0.6.0",
    "grunt-saucelabs": "~8.1.0",
    "grunt-sed": "~0.1.1",
    "load-grunt-tasks": "~0.6.0",
    "markdown": "~0.5.0",
    "npm-shrinkwrap": "~3.1.6",
    "time-grunt": "~0.3.2"
  },

```
 
これで、Gruntのコマンドを利用できるようになります。


#4. コンパイル

以下のコマンドを実行しましょう。

```shell-session

grunt watch (Watch)
```
そしてlessファイルの編集をはじめてください。
lessファイルに変更があったら、自動的にコンパイルしてくれます。

![grunt.png](https://qiita-image-store.s3.amazonaws.com/0/32215/dc74032e-0b81-4dda-38fc-4f945444715f.png)

#5.注意点

今回、Grunt.jsには何も手を加えていません。

そのため、コンパイル成功時に出力されるcssファイルは以下のとおりでした。

```shell-session
Execution Time (2014-10-16 05:47:47 UTC)
less:compileCore   2.1s  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 98%
less:compileTheme  40ms  ▇▇ 2%
Total 2.2s

Completed in 4.626s at Thu Oct 16 2014 14:47:49 GMT+0900 (JST) - Waiting...
>> File "less/theme.less" changed.
Running "less:compileCore" (less) task
File dist/css/bootstrap.css.map created.
File dist/css/bootstrap.css created: 131.68 kB → 131.72 kB

Running "less:compileTheme" (less) task
File dist/css/bootstrap-theme.css.map created.
File dist/css/bootstrap-theme.css created: 2.44 kB → 2.49 kB

Done, without errors.
```

/dist/css/ディレクトリのうち☆がついたものだけがコンパイル、出力されます。

```shell-session

☆bootstrap-theme.css
☆bootstrap-theme.css.map
bootstrap-theme.min.css
☆bootstrap.css
☆bootstrap.css.map
bootstrap.min.css
```

そのためindex.htmlで読み込むcssはmin.cssではないほうにして実行してください。
min.cssを作成うるのは何かオプションが必要なのかもしれません。


# (おまけ)連載しています

東洋経済オンラインで、「エンジニア夫婦のあるある日記」を連載中です！

■過去の連載記事はこちら
http://t.co/RzQWoQUbJ2

![Sep1_bohebohe.jpg](https://qiita-image-store.s3.amazonaws.com/0/32215/3bc21eff-0c09-5a72-6af1-1deeca53f289.jpeg)