先日7/27にBootstrap 3 RC1がリリースされました。
フラットなデザインになっていたり、モバイルファーストなコードになっていたりと色々と変わっています。詳しくは、公式の情報等々を見てもらうとして、個人的に興味をそそられたのが、LESS/JSファイルのコンパイル方法がこれまでのバージョン2系から変わっているということです。
この部分をちゃんと理解しておかないと、これから案件でBootstrap3を使うかもという人はしんどいんじゃないかと思います。
では何がどう変わったのか。その辺を簡単にまとめます。
Bootstrap2系でのコンパイル方法
これまでのBootstrap2系では、Bower経由などでGitHubからファイル群を落とすとファイルの中にMakefileが含まれていました。
このMakefileを使って、makeコマンドを叩くことで、LESS/JSファイルをコンパイルしてきました。以下公式のドキュメント。
LESSファイルなら、以下のコマンドでrecessというnpmモジュールを使ってのLESSファイルのコンパイル・圧縮版の作成。
$ make bootstrap-css
JSファイルなら、以下のコマンドで各種JSファイルの結合・uglifyjsを使っての圧縮版の作成。といった具合。
$ make bootstrap-js
Bootstrap3でのコンパイル方法
現在、Bower等でBootstrap3をGitHubから落とすと、これまであったMakefileはありません。よく見ると代わりにGruntfile.jsがあります。
つまりバージョン3では、makeではなくGruntというNode.jsベースのビルドツールを使ってコンパイルすることになります。以下公式のドキュメント。
説明すると長くなるので、Gruntについての詳しくは以下の記事を見ていただくか、ググるなりしてもらえればと。
必要な環境を整えたうえで以下のコマンドを叩くだけで、jshintでの構文チェック、qunitでのテスト、recessでのLESSファイルのコンパイル・圧縮、JSファイルの結合・uglifyでの圧縮が走ります。
$ grunt
LESSだけなら$ grunt dist-css、JSだけなら$ grunt dist-js、てな感じでこれまで通り個別にタスクを走らせることも可能。当然、$ grunt watchでファイルの監視もできる。
まとめ
今回のコンパイル方法以外にも、ローカルでBootstrapのドキュメントを見るには、Jekyllといういわゆる静的サイトジェネレータを使うようになっています。
もう何がなんだか訳がわからないよママン！っていう方もいらっしゃるかもしれませんが、もうそういう時代なんですよねー（遠い目）。 でもこの辺のツールが扱えるようになると開発効率は格段に上がりますし何かと幸せになれるかもしれません。