Bootstrap3のcssをless駆動でがしがしカスタムする、というお話

目標

Bootstrap3(http://getbootstrap.com/) の自前カスタム環境をローカルに作る。作業の効率化のために自動でless->cssリビルド、すぐにプレビューしながらやりたい。

前提

• Mac OSX Mavericks & Chrome
• Twitter Bootstrap v3.1.1
• ruby, python, node, git, jekyll 等(他にも？)はインストール済み(brew, anyenvが便利だよ！)

手順

1. Bootstrap をダウンロード

適当にディレクトリを作ってそこにgit cloneする。

$ mkdir twbs3
$ cd twbs3
$ git clone https://github.com/twbs/bootstrap.git

2. JSライブラリのセットアップ

package.jsonから必要なライブラリをインストールする。

$ cd bootstrap
$ npm install

3. gruntタスクの追加と変更

Gruntfile.jsを編集する。【慎重にね】
更新差分は以下。

$ diff -bu Gruntfile.org.js Gruntfile.js

--- Gruntfile.org.js    2014-02-23 00:31:01.000000000 +0900
+++ Gruntfile.js    2014-02-23 00:57:20.000000000 +0900
@@ -323,8 +323,12 @@
       },
       less: {
         files: 'less/*.less',
-        tasks: 'less'
-      }
+        // tasks: 'less' //removed
+        tasks: ['dist-css', 'dist-docs', 'exec:jekyllRebuild'] //added
+      },
+      options: { //added
+        livereload: true,
+      },
     },

     sed: {
@@ -355,6 +359,9 @@
       },
       npmShrinkWrap: {
         command: 'npm shrinkwrap --dev'
+      },
+      jekyllRebuild: { //added
+        command: 'jekyll build'
       }
     }
   });

4. LiveReloadプラグインのインストール

ChromeにLiveReloadプラグインを入れる。
https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

---

↓ 以下はカスタム作業をする時に行う

5. 作業環境を走らせる

grunt でwatchタスクを走らせ、

$ grunt watch

さらにターミナルで新タブ作って、
jekyllで http://0.0.0.0:9001/ にWEBサーバを立ち上げる。

$ jekyll serve

6. Happy LESSing

あとは
http://0.0.0.0:9001/ を表示しながら
がしがしless/*.lessをいじりましょう。
lessが更新されると自動で http://0.0.0.0:9001/ 以下に反映され、さらにChromeのタブがリロードされます。あ、LiveReloadプラグインをonにしとくのを忘れずに。

Thanks：
Bootstrap 3 RC1をGruntで効率的にカスタマイズ
http://qiita.com/suzukima/items/bde0a2686e5b2eb4cd1a
各ブラウザ用LiveReloadプラグイン
http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-

大ざっぱに以上です。

後日談

使ってみると色々とストレスフルなやり方なので、
Bootswatch本家の開発環境をカスタムしてless駆動で効率的にBootstrapをカスタムする、というお話
http://qiita.com/smaeda/items/992a3ebbed47718131b1
に改良版の投稿をしました。そちらがお勧めです。

---

告知

というか宣伝ですが、

2chまとめ巡査長β

http://j.inthemaking.net/
というのを作ってみました。PCでも見れますがスマホ用です。
よろしければ暇つぶしに使って感想いただければ嬉しいです。