bootstrap
grunt

Bootstrap 3 RC1をGruntで効率的にカスタマイズ

More than 5 years have passed since last update.

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 · BootstrapDownload 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対象のファイルを編集し保存すると、自動でブラウザがリロードされるはずです。これでさらに効率的なカスタマイズができますね!