node.js と Grunt で Bootstrap less ファイルをコンパイルする（自動化）

2014.12.08 プログラミング, Node.js

Plamo-linux 上に Bootstrap の less ファイル自動コンパイル環境を作ってみようと思います。環境の構築方法は、Bootstrap の「Compiling CSS and JavaScript」に記載があります。

node.js インストール

ソースからビルドしてみました。

$ wget http://nodejs.org/dist/v0.10.33/node-v0.10.33.tar.gz
$ tar zxvf node-v0.10.33.tar.gz
$ cd node-v0.10.33
$ ./configure
$ make
$ su
# make install

$ node -v
v0.10.33

$ npm -v
1.4.28

npm も同時にインストールされるようです。

grunt インストール

$ su
# npm install -g grunt-cli
/usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt
grunt-cli@0.1.13 /usr/local/lib/node_modules/grunt-cli
矜碣esolve@0.3.1
矜碆opt@1.0.10 (abbrev@1.0.5)
矜砌indup-sync@0.1.3 (lodash@2.4.1, glob@3.2.11)

メッセージが文字化けしていますね。とりあえず進んでみます。

Bootstrap ダウンロード～展開

Getting started · Bootstrap

Bootstrap のソースコードをダウンロードして展開、ディレクトリに移動し、npm install で何やらインストールするそうです。この当たりよく分かりませんが進みましょう。

$ wget https://github.com/twbs/bootstrap/archive/v3.3.1.zip
$ unzip v3.3.1.zip
$ cd bootstrap-3.3.1
$ npm install
…
grunt-saucelabs@8.3.3 node_modules/grunt-saucelabs
矜矣olors@0.6.2
矜碵aucelabs@0.1.1
矜碌@1.0.1
矜碣equest@2.35.0 (json-stringify-safe@5.0.0, aws-sign2@0.5.0, forever-agent@0.5.2, qs@0.6.6, oauth-sign@0.3.0, tunnel-agent@0.4.0, mime@1.2.11, node-uuid@1.4.2, form-data@0.1.4, tough-cookie@0.12.1, lodash.merge@2.4.1, http-signature@0.10.0, hawk@1.0.0)
矜碎odash@2.4.1
矜碵auce-tunnel@2.1.0 (chalk@0.4.0, request@2.21.0)

かなりいろいろインストールするようです。同じように文字化けしています。

less ファイルコンパイル

これで grunt と打てば less ファイルがコンパイルされるようです。試しにフォントファミリーとサイズを変更してみましょう。

less/variables.less

@font-family-sans-serif: “Helvetica Neue”, Helvetica, Arial, sans-serif;
↓
@font-family-sans-serif: Verdana, “ヒラギノ角ゴ ProN W3”, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, sans-serif;

@font-size-base: 14px;
↓
@font-size-base: 16px;

と変更して grunt と打ちます。

dist/css/bootstrap.css

body {
font-family: Verdana, “ヒラギノ角ゴ ProN W3”, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, sans-serif;
font-size: 16px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}

確かに変わっています。

コンパイルの自動化

less ファイルを変更する度にコマンドラインで grunt と打つのも面倒ですので、

$ grunt watch &

と打っておきます。これで less ディレクトリ以下のファイルに変更が加えられると

>> File “less/variables.less” changed.
Running “less:compileCore” (less) task
File dist/css/bootstrap.css.map created.
File dist/css/bootstrap.css created: 135.58 kB 皹35.62 kB

Running “less:compileTheme” (less) task
File dist/css/bootstrap-theme.css.map created.
File dist/css/bootstrap-theme.css created: 18.83 kB 皹8.88 kB

Done, without errors.

自動的にコンパイラが走り、css ファイルを書き換えます。

grunt watch は minify ファイルは作りませんので、カスタマイズ終了後に

$ grunt cssmin

と打てば、minify ファイルが作成されます。watch で minify ファイルまで作ってしまいたい場合は、Gruntfile.js の watch Task を以下のように編集すれば自動で作るようになります。

watch: {
…
less: {
files: ‘less/**/*.less’,
tasks: [‘less’, ‘cssmin’]
}
},

ということで、less ファイルのコンパイルが自動化できました。dist ディレクトリも自由に変更できるようですが、私は、bootstrap の dist ディレクトリをシンボリックリンクにして直接該当ファイルを書き換えるようにしています。たとえば、laravel4-blog の場合、

$ ln -s ../public_html/laravel4-blog/public/assets/ dist

としています。

http://ausnichts.hatenablog.com/archive/category/laravel4ausnichts.hatenablog.com

#Linux, #Node.js, #Plamo