読者です 読者をやめる 読者になる 読者になる

garbagetown

個人の日記です

Vagrant 上の Ubuntu 12.04 で Twitter Bootstrap 3 をビルドする

間もなくリリースされそうな Twitter Bootstrap 3proxy 環境下の Windows7 に Vagrant で Ubuntu 12.04 を入れてみた - garbagetown で構築した検証環境上でビルドしてみます。

依存性のダウンロード

まず bootstrap3 が依存するモジュールをダウンロードします。

3.0.0-wip の README には、素朴に npm install しろとありますが、ここでも以下の通り proxy の設定が必要です。your.proxy.com8080 は自身の環境に読み替えてください。

また、http 版のレジストリを登録する必要がありました。

vagrant@precise64:~/devel/repo/bootstrap$ npm config set proxy http://your.proxy.com:8080
vagrant@precise64:~/devel/repo/bootstrap$ npm config set registry http://registry.npmjs.org/

これで依存性をダウンロードすることができます。bootstrap 3.0.0-wip をチェックアウトしたディレクトリに移動して npm install を実行します。

vagrant@precise64:~/devel/repo/bootstrap$ git branch
* 3.0.0-wip
  master
vagrant@precise64:~/devel/repo/bootstrap$ npm install
npm http GET http://registry.npmjs.org/uglify-js/1.3.4
npm http GET http://registry.npmjs.org/jshint/2.1.2
npm http GET http://registry.npmjs.org/recess/1.1.7
(snip)
tqq underscore@1.5.1
tqq nopt@2.1.1 (abbrev@1.0.4)
mqq less@1.3.3

make

依存性のダウンロードが完了したら make してみます。

vagrant@precise64:~/devel/repo/bootstrap$ make

Building Bootstrap...
--------------------------------------------------
Running JSHint on JavaScript...             ? Done
Compiling LESS with Recess...               ? Done
Prepping documentation assets...            ? Done
Compiling and minifying JavaScript...       ? Done
--------------------------------------------------
Success!

Thanks for using Bootstrap,
<3 @mdo and @fat

問題無さそうですが、make だけではコンパイル後の css や js は生成されませんでした。make bootstrap としてやる必要があるようです。

vagrant@precise64:~/devel/repo/bootstrap$ make bootstrap
mkdir -p bootstrap/css
recess --compile ./less/bootstrap.less > bootstrap/css/bootstrap.css
recess --compress ./less/bootstrap.less > bootstrap/css/bootstrap.min.css
(snip)
echo "/*!\n* Bootstrap.js by @fat & @mdo\n* Copyright 2012 Twitter, Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > bootstrap/js/copyright.js
cat bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js > bootstrap/js/bootstrap.min.js
rm bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js

なんかできたっぽいので確認してみます。

vagrant@precise64:~/devel/repo/bootstrap$ ls -laR bootstrap/
bootstrap/:
total 16
drwxrwxr-x 4 vagrant vagrant 4096 Jul 12 06:12 .
drwxr-xr-x 9 vagrant vagrant 4096 Jul 12 06:12 ..
drwxrwxr-x 2 vagrant vagrant 4096 Jul 12 06:12 css
drwxrwxr-x 2 vagrant vagrant 4096 Jul 12 06:12 js

bootstrap/css:
total 168
drwxrwxr-x 2 vagrant vagrant  4096 Jul 12 06:12 .
drwxrwxr-x 4 vagrant vagrant  4096 Jul 12 06:12 ..
-rw-rw-r-- 1 vagrant vagrant 87564 Jul 12 06:12 bootstrap.css
-rw-rw-r-- 1 vagrant vagrant 71650 Jul 12 06:12 bootstrap.min.css

bootstrap/js:
total 92
drwxrwxr-x 2 vagrant vagrant  4096 Jul 12 06:12 .
drwxrwxr-x 4 vagrant vagrant  4096 Jul 12 06:12 ..
-rw-rw-r-- 1 vagrant vagrant 54411 Jul 12 06:12 bootstrap.js
-rw-rw-r-- 1 vagrant vagrant 25937 Jul 12 06:12 bootstrap.min.js

( ・ㅂ・)و ̑̑ グッ !

参考