bootstrapをmake（lesscとuglifyjsをインストール）

githubのtwitter-bootstrapをビルドしたのでメモ。

Makefileがあるのでmakeコマンドでlessからcss（bootstrap.min.css）と、各モジュール毎にバラバラに用意されているファイルをまとめ、さらに圧縮されたjavascriptファイル（bootstrap.min.js）を作成することが出来る。簡単だけど、環境を用意する必要がある。

• lessc
  lessコンパイラ。lessファイルからcssファイルを生成する。
• uglify-js
  javascript圧縮ツール。

lesscもuglify-jsもnode.jsベースのコマンドラインツールなので、node.jsのインストールから行う必要がある。

Windowsではとてもめんどくさかったけど、Macではhomebrew使って簡単だった。Macでよかった。

環境整備

1. 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]% 
   
   
   

2. 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]% 
   
   
   

3. 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をビルド

1. とりあえず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.
   
   
   

2. 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。