Bootstrap3のソースコードを使う環境を用意するには

Bootstrap3のソースコードを使う環境を用意するにはどうすればいいか確認をしてみました。「Bootstrap」からアーカイブファイルを取得します。
Downloadのボタンをクリックすると、配布版、ソースコード版、Sass版のダウンロードボタンが表示されます。

ダウンロード
基本は、配布版(bootstrap-3.1.1-dist.zip)をダウンロードして使います。カスタマイズをしたり、コードを確認したい場合は、ソースコード版(v3.1.1.zip(ソースコード版))を使います。Lessコンパイラが必要でNode.js、Grunt、Less.js、uglify-jsなどのセットアップも必要です。Saas版(v3.1.1.tar.gz(Saas版))はRailsやCompassやSassしか使わないプロジェクトで使います.

ここでは、ソースコード版をダウンロードして展開してあるとします。

$ unzip v3.1.1.zip

jekyll
BootstrapのドキュメントはソースコードをダウンロードしてRubyプログラムのjekyllでHTMLへ変換すれば、Webブラウザで見ることができます。オンラインで見ればいいので必須ではありません。jekyllはRubyGemでインストールが簡単にできます。ruby, gemコマンドはインストールされているとすると、下記のようにすればjekyllをインストールできます。インストールしたら、 bootstrap-3.1.1 へ移動して、jekyll serveを起動するとドキュメントへ http://localhost:9001 でアクセスできるようになります。

$ gem install jekyll
$ cd bootstrap-3.1.1/
$ jekyll serve

Node.js
Node.jsのインストールはCentOS6を使う場合はepelリポジトリを使うのが簡単です。32bit版Linuxを使っている場合は下記。

$ rpm -ivh http://ftp.riken.jp/Linux/fedora/epel/6/i386/epel-release-6-8.noarch.rpm

64bit版Linuxを使っている場合は下記。

$ rpm -ivh http://ftp.riken.jp/Linux/fedora/epel/6/x86_64/epel-release-6-8.noarch.rpm

epelリポジトリが用意できたなら、下記のようにnodejsとnpmをインストールします。

$ yum install nodejs npm --enablerepo=epel

Gruntのインストール
Gruntが必要なだということなので、npm installコマンドでgrunt-cliをインストールします。

$ npm install -g grunt-cli.

npm installの実行
bootstrap-3.1.1/package.json に必要なNode.jsモジュールが記述されています。これを使ってインストールをします。依存関係の問題で grunt 0.4.2 が必要なので、次のように package.json を修正します。「”grunt”: “~0.4.2”,」の指定を0.4.2にします。

"grunt": "0.4.2",

書き換えたら npm installを実行します。

$ npm install

配布物の生成
gruntコマンドでdistディレクトリに生成できます。

$ grunt dist

Less.jsUglifyJSJSHintQUnitPhantomJSといったものを使っているようです。

サンプル
examplesがdocsにあるので、そこから適当に好みのものを選んで使ってみれば良いでしょう。carouselとかJustified navとかJustified navとか良さそうです。小さなコンポーネントについて知りたいなら、themeを参照すると理解しやすいでしょう。

参考文献
書籍はあまりないみたいですね。Web上のドキュメントを参考にするのが良いのかもしれません。

同じタグの記事: Bootstrap
同じタグの記事: node.js
同じカテゴリの記事: Linux
関連書籍: node.js