Makefileがあるのでmakeコマンドでlessからcss（bootstrap.min.css）と、各モジュール毎にバラバラに用意されているファイルをまとめ、さらに圧縮されたjavascriptファイル（bootstrap.min.js）を作成することが出来る。簡単だけど、環境を用意する必要がある。
lesscもuglify-jsもnode.jsベースのコマンドラインツールなので、node.jsのインストールから行う必要がある。
Windowsではとてもめんどくさかったけど、Macではhomebrew使って簡単だった。Macでよかった。
環境整備
- node.jsをインストール。brewコマンド（homebrew）は予め用意しておく必要があります。
[150]% brew install node ==> Downloading http://nodejs.org/dist/v0.6.14/node-v0.6.14.tar.gz ######################################################################## 100.0% ==> ./configure --prefix=/usr/local/Cellar/node/0.6.14 --without-npm ==> make install ==> Caveats Homebrew has NOT installed npm. We recommend the following method of installation: curl http://npmjs.org/install.sh | sh After installing, add the following path to your NODE_PATH environment variable to have npm libraries picked up: /usr/local/lib/node_modules ==> Summary /usr/local/Cellar/node/0.6.14: 80 files, 7.6M, built in 7.0 minutes [151]%
- npmをインストール
[153]% curl http://npmjs.org/install.sh | sh % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 100 7881 100 7881 0 0 9741 0 --:--:-- --:--:-- --:--:-- 22013 tar=/usr/bin/tar version: bsdtar 2.8.3 - libarchive 2.8.3 install npm@1.1 fetching: http://registry.npmjs.org/npm/-/npm-1.1.15.tgz 0.6.14 1.1.15 cleanup prefix=/usr/local All clean! /usr/local/bin/npm -> /usr/local/lib/node_modules/npm/bin/npm-cli.js npm@1.1.15 /usr/local/lib/node_modules/npm It worked [154]%
- npmでlesscとuglify-jsをインストール。-gオプションをつけると/usr/local/binにインストールしてくれる。
[156]% [156]% npm install less uglify-js -g npm http GET https://registry.npmjs.org/less npm http 200 https://registry.npmjs.org/less npm http GET https://registry.npmjs.org/less/-/less-1.3.0.tgz npm http 200 https://registry.npmjs.org/less/-/less-1.3.0.tgz /usr/local/bin/lessc -> /usr/local/lib/node_modules/less/bin/lessc less@1.3.0 /usr/local/lib/node_modules/less npm http GET https://registry.npmjs.org/uglify-js npm http 200 https://registry.npmjs.org/uglify-js npm http GET https://registry.npmjs.org/uglify-js/-/uglify-js-1.2.6.tgz npm http 200 https://registry.npmjs.org/uglify-js/-/uglify-js-1.2.6.tgz /usr/local/bin/uglifyjs -> /usr/local/lib/node_modules/uglify-js/bin/uglifyjs uglify-js@1.2.6 /usr/local/lib/node_modules/uglify-js [157]%
これで準備OK。
bootstrapをビルド
-
とりあえずgithubから取得
[126]% git clone https://github.com/twitter/bootstrap.git Cloning into 'bootstrap'... remote: Counting objects: 16437, done. remote: Compressing objects: 100% (5901/5901), done. remote: Total 16437 (delta 11451), reused 15137 (delta 10358) Receiving objects: 100% (16437/16437), 10.75 MiB | 248 KiB/s, done. Resolving deltas: 100% (11451/11451), done.
-
Makefileがおかしい気がする。make docsしてからmake bootstrapしないとうまくいかないかも。
[268]% cd bootstrap [269]% make bootstrap mkdir -p bootstrap/img mkdir -p bootstrap/css mkdir -p bootstrap/js cp img/* bootstrap/img/ lessc ./less/bootstrap.less > bootstrap/css/bootstrap.css lessc --compress ./less/bootstrap.less > bootstrap/css/bootstrap.min.css lessc ./less/responsive.less > bootstrap/css/bootstrap-responsive.css lessc --compress ./less/responsive.less > bootstrap/css/bootstrap-responsive.min.css cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js > bootstrap/js/bootstrap.js uglifyjs -nc bootstrap/js/bootstrap.js > bootstrap/js/bootstrap.min.tmp.js 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 [270]% ls bootstrap/* bootstrap/css: bootstrap-responsive.css bootstrap.css bootstrap-responsive.min.css bootstrap.min.css bootstrap/img: glyphicons-halflings-white.png glyphicons-halflings.png bootstrap/js: bootstrap.js bootstrap.min.js [271]%
bootstrapディレクトリの下にcssとjavascriptが生成されている。bootstrap-responsive.min.cssはレンスポンシブデザインのcss。
