###目標
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でも見れますがスマホ用です。
よろしければ暇つぶしに使って感想いただければ嬉しいです。