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

概要

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

package.jsonを生成

それでは、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...とはなっています。(なんかいろいろ足りないと言っているようですが。)

cssを変更してみる

「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;
}

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

めでたしめでたし^^

〜関連ページ〜

  1. Bootstrapでスマホサイト制作
  2. GruntでLESSをコンパイルしてBootstrapをカスタマイズ
  3. 改めて、Grunt.jsをインストール
  4. 改めて、GruntでLESSをコンパイルしてBootstrapをカスタマイズ
  5. 〜まとめ〜 GruntでLESSをコンパイルしてBootstrapをカスタマイズ

投稿日:

ページのトップへ戻る