改めて、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」の30行目付近
@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の257行目付近
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ccffff;
}
と背景色が変更されていることが確認できました。
めでたしめでたし^^
〜関連ページ〜