改めて、GruntでLESSをコンパイルしてBootstrapをカスタマイズ

Gruntのことを少しだけ理解できたところで、改めてGithubからダウンロードしてきたフォルダの中身を見てみると、「package.json」も「Gruntfile.js」も用意されていました！！

それでは、bootstrap-master（作業フォルダ）に移動して、$ npm install をコマンド。

先ほどとは比べ物にならないくらいたくさんのファイルがインストールされています。

そして、たくさんのエラーが・・・＞＜

大丈夫なのかな？？

$ grunt watch

とすれば、見事

$ grunt watch

>> Local Npm module "grunt-contrib-connect" not found. Is it installed?
>> Local Npm module "grunt-contrib-qunit" not found. Is it installed?
>> Local Npm module "grunt-csscomb" not found. Is it installed?
>> Local Npm module "grunt-html-validation" not found. Is it installed?
>> Local Npm module "grunt-jscs-checker" not found. Is it installed?
>> Local Npm module "grunt-saucelabs" not found. Is it installed?

Running "watch" task
Waiting...

Waiting...とはなっています。（なんかいろいろ足りないと言っているようですが。）

「variables.less」の３０行目付近

@body-bg: #fff;

を

@body-bg: #cff;

に変更してみると、

>> File "less/variables.less" changed.

>> Local Npm module "grunt-contrib-connect" not found. Is it installed?
>> Local Npm module "grunt-contrib-qunit" not found. Is it installed?
>> Local Npm module "grunt-csscomb" not found. Is it installed?
>> Local Npm module "grunt-html-validation" not found. Is it installed?
>> Local Npm module "grunt-jscs-checker" not found. Is it installed?
>> Local Npm module "grunt-saucelabs" not found. Is it installed?

Running "less:compile" (less) task
File dist/css/bootstrap.css created.
File dist/css/bootstrap-theme.css created.

Running "less:minify" (less) task
File dist/css/bootstrap.min.css created.
Original: 122759 bytes.
Minified: 100636 bytes.
File dist/css/bootstrap-theme.min.css created.
Original: 14438 bytes.
Minified: 13015 bytes.

Done, without errors.
Completed in 4.923s at Thu Dec 12 2013 21:03:23 GMT+0900 (JST) - Waiting...
OK
>> File "less/variables.less" changed.

>> Local Npm module "grunt-contrib-connect" not found. Is it installed?
>> Local Npm module "grunt-contrib-qunit" not found. Is it installed?
>> Local Npm module "grunt-csscomb" not found. Is it installed?
>> Local Npm module "grunt-html-validation" not found. Is it installed?
>> Local Npm module "grunt-jscs-checker" not found. Is it installed?
>> Local Npm module "grunt-saucelabs" not found. Is it installed?

Running "less:compile" (less) task
File dist/css/bootstrap.css created.
File dist/css/bootstrap-theme.css created.

Running "less:minify" (less) task
File dist/css/bootstrap.min.css created.
Original: 122759 bytes.
Minified: 100636 bytes.
File dist/css/bootstrap-theme.min.css created.
Original: 14438 bytes.
Minified: 13015 bytes.

Done, without errors.
Completed in 4.460s at Thu Dec 12 2013 21:03:41 GMT+0900 (JST) - Waiting...

となり、bootstrap.cssの２５７行目付近

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ccffff;
}

と背景色が変更されていることが確認できました。

めでたしめでたし＾＾

〜関連ページ〜