先日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といういわゆる静的サイトジェネレータを使うようになっています。
もう何がなんだか訳がわからないよママン!っていう方もいらっしゃるかもしれませんが、もうそういう時代なんですよねー(遠い目)。 でもこの辺のツールが扱えるようになると開発効率は格段に上がりますし何かと幸せになれるかもしれません。