Bootstrap 3 RC1では、ビルドシステムがmakeからGruntへ変更されています。このGruntを使うと、lessファイルやJavaScriptファイルの変更を監視し、自動でビルド、といったことができます。
RC1ではサイトからLESSの変数をカスタマイズすることができなくなっているので、自分でLESSコンパイルが必要です。そのときに予め用意されたGruntをを使うと楽です。ただこの方法が以前のように書かれていないようなので、調査ついでに試してみました。
事前準備
nodeをインストールしましょう。
grunt-cliのインストール
Gruntを使えるようにします。Grunt 0.3からは、gruntのコマンドラインインターフェースであるgrunt-cliをインストールして利用するようになっています。0.3未満のGruntを使用していた場合は、npm uninstall -g gruntを実行してアンインストールしておきましょう。
grunt-cliはグローバルにインストールしましょう。npm install -g grunt-cliを実行すればインストール完了です。
Bootstrap 3 RC1を入手
ビルドするためにソースコード付きのものをダウンロードします。Getting started · BootstrapでDownload latest source codeからダウンロードするか、GitHubからcloneするなりしてください。zipでダウンロードした場合は適当なフォルダに展開しておきましょう。
必要なものをインストール
展開後のフォルダに移動し、npm installを実行すると、必要なものを自動で次々ダウンロードしてくれます。
これで、Gruntでのビルドができるようになりました。
利用方法
ビルドでどのような処理がされるかは、Gruntfile.jsに記述されています。ここでは代表的なもののみ紹介します。
grunt watch
展開したフォルダの直下でgrunt watchを実行すると、js/.js, js/test/tests/unit/.js, less/*.less の監視を開始し、変更があると自動的に以下を実行します。
- jshintとqunit(JavaScriptファイルの場合)
- lessファイルコンパイルと圧縮(LESSファイルの場合)
LESSファイルから生成されたCSSファイルは、dist/cssに配置されます。
grunt clean
distディレクトリを削除します。つまり、生成されたファイルを掃除します。
grunt
gruntのみを実行すると、以下を実施します。
- jshint
- qunit
- distディレクトリの削除
- lessコンパイルと圧縮
- JavaScriptファイルの結合(concat)と圧縮(uglify)
他にもGruntのタスクはありますので、興味のある方はGruntfile.jsを覗いてみてください。
カスタマイズですが、一度gruntを実行してファイルを生成しておき、カスタマイズ実施中はwatchで自動コンパイル、完成したらgruntでJavaScriptのconcatとuglifyも実行、という流れで使っていけばよいでしょう。
さらに効率的にカスタマイズ
watchタスクにちょっと手を加えるだけでLiveReload(ファイルに更新があると自動でブラウザをリロードしてくれる)がつかえるようになるので、ぜひ利用しましょう。
ブラウザ拡張のインストール
まず、How do I install and use the browser extensions? – LiveReload Help & Supportに、各ブラウザへ対応した拡張へのリンクがありますので、そこからインストールしましょう。
watch実行時にLiveReloadが実行されるようGruntfileを変更
Gruntfile.jsを編集し、watchタスクのoptionとして、livereload: trueを追加してください。以下の様な感じです。
watch: {
option: {
livereload: true,
},
src: {
files: '<%= jshint.src.src %>',
tasks: ['jshint:src', 'qunit']
},
test: {
files: '<%= jshint.test.src %>',
tasks: ['jshint:test', 'qunit']
},
recess: {
files: 'less/*.less',
tasks: ['recess']
}
}
確認
あとは、確認対象ファイルをブラウザで開き、ブラウザ拡張のボタンを押せばOKです。watch対象のファイルを編集し保存すると、自動でブラウザがリロードされるはずです。これでさらに効率的なカスタマイズができますね！