おにぎりたまごうぃんなー

Suzuki Yuki@s12bt おべんと箱みたいに色々つめこみたい。仕事とかデザインとか料理とか好きなもののことを書きます。

GruntをつかってLessファイルをWatchしてコンパイルする(Lessをコマンドラインからコンパイルする2日目)

昨日のつづき
Lessをコマンドラインからコンパイルする方法を調べ始めて、基本的なコンパイルはlesscでできたけど、ファイルを監視する機能がないことがわかった。

ファイル更新したらコンパイルしてほしい!!!
Lessファイルをwatchするには色々あるけれど
less-watch
less を自動コンパイルしたい - 人生いきあたりばったりで生きてます@はてな
せっかくの機会なので、名前だけ聞いていたGruntを使ってみようと思った。
Sass+Compass特集でたまたま今月買ったWEB+DB PRESSにid:naoyaさんのGrunt記事もあったし!

WEB+DB PRESS Vol.77

WEB+DB PRESS Vol.77

  • 作者: 中川勝樹,山内沙瑛,舟崎健治,吉荒祐一,今井雄太,八木橋徹平,安川健太,近藤宇智朗,奥野幹也,天野祐介,賈成カイ,伊藤直也,住川裕岳,北川貴久,菅原一志,後藤秀宣,久森達郎,登尾徳誠,渡邊恵太,中島聡,A-Listers,小俣裕一,はまちや2,川添貴生,石本光司,舘野祐一,沖田邦夫,澤村正樹,卜部昌平,吉藤博記,片山暁雄,平山毅,WEB+DB PRESS編集部
  • 出版社/メーカー: 技術評論社
  • 発売日: 2013/10/24
  • メディア: 大型本
  • この商品を含むブログ (2件) を見る

そもそもGruntとは

Gruntはフロントエンド、主にはJavascriptやCSS周りの作業を自動化するためのタスクランナーツールです
(WEB+DB PRESS Vol.77 Gruntによるフロントエンド開発作業の自動化 P138)

Lessファイルの更新を検知する → Lessファイルをコンパイルする → 指定したディレクトリにcssファイルを出力する
というところを自動化してもらうために使う。

Gruntのインストール

$ npm install -g grunt-cli
$ grunt -v

$ grunt -v
grunt-cli: The grunt command line interface. (v0.1.9)

Fatal error: Unable to find local grunt.

If you're seeing this message, either a Gruntfile wasn't found or grunt
hasn't been installed locally to your project. For more information about
installing and configuring grunt, please see the Getting Started guide:

http://gruntjs.com/getting-started

npm installの-gオプションは、現在いるディレクトリだけではなく全体で使いたいものをいれるとき(global)につけるオプション。
エラーが出てくるのは、Lessを監視するためのプロジェクト(ディレクトリ)に別途Gruntを入れる必要があるから。

サンプルに以下のディレクトリとファイルを用意
├── sandbox
│   ├── css
│   └── less
│       ├── default.css
│       └── default.less

# ディレクトリに移動
$ cd sandbox
$ npm install grunt

$ ls     
css          less         node_modules

プロジェクトごとにgruntを使うので、今度は-gオプションをつけずにgruntをインストール。
そうするとディレクトリの中にnode_modulesファイルが生成される。

タスクの設定(プラグインの導入とGrunt.jsの作成)

Grunt自体はタスク自動化ツールなので、なにをするのか指示をしないといけない。
タスクが書かれたjsファイルがプラグインとして公開されている。
gruntjs/grunt-contrib · GitHub
プラグインに"contrib"と書かれているものは、公式のものらしい。

Gruntの実行には、Gruntfile.jsというファイルが必要になる。
Gruntfile.jsの書き方ドキュメントは以下。今は全然わからないけれど、今後のためにおいとく。
Configuring tasks - Grunt: The JavaScript Task Runner
何もしないGruntfile.jsを作成して、プロジェクトの一番上のディレクトリに保存する

module.exports = function(grunt){
  //設定
  grunt.initConfig({});
  //実行時のキーワード
  grunt.registerTask("default", []);
}
grunt-contrib-lessをつかってLessファイルをコンパイルする

まずlessファイルをコンパイルするために、grunt-contrib-lessをいれる。

$ npm install grunt-contrib-less

Gruntfile.jsを変更する。

module.exports = function(grunt){

  // grunt-contrib-lessプラグインを読み込む
  grunt.loadNpmTasks("grunt-contrib-less");

  // 設定
  grunt.initConfig({
    less: {
      //開発版のとき
      development: {
        files: {
          "./css/sample.css": "./less/default.less"
        }
      },
      //製品版のとき
      production: {
        options: {
          cleancss: true
        },
        files: {
          "./css/sample.css": "./less/default.less"
        }
      }
    }
  });

  //引数をなにもつけないでgruntを実行したときは、developmentのときの設定で実行する
  grunt.registerTask("default", ["less:development"]);
}
$ cd sandbox
$ grunt
Running "less:development" (less) task
File ./css/sample.css created.

Done, without errors.

コンパイルできた!
productionでコンパイルしたいときは

$ grunt less:production
Running "less:production" (less) task
File ./css/sample.css created.

Done, without errors.

developmentとかproductionとか場合分けをなくしてみようと思ったら、実行できるけどcssファイルが生成されていない。なんでだろ。

// 以下のコードだとcssが出力されない...
module.exports = function(grunt){

  grunt.loadNpmTasks("grunt-contrib-less");

  grunt.initConfig({
    less: {
        options: {
          cleancss: true
        },
        files: {
          "./css/sample.css": "./less/default.less"
        }
      }
    }
  });

  grunt.registerTask("default", []);
}
$ grunt
Done, without errors.
# cssファイルが作成されない
grunt-contrib-watchをつかってファイルの監視をする

grunt-contrib-lessをいれる。

$ npm install grunt-contrib-watch

Gruntfile.jsを変更する。

module.exports = function(grunt){

  // プラグイン読み込み
  grunt.loadNpmTasks("grunt-contrib-less");
  grunt.loadNpmTasks("grunt-contrib-watch");

  // 設定
  grunt.initConfig({
    less: {
      //開発版のとき
      development: {
        files: {
          "./css/sample.css": "./less/default.less"
        }
      },
      //製品版のとき
      production: {
        options: {
          cleancss: true
        },
        files: {
          "./css/sample.css": "./less/default.less"
        }
      }
    },
    watch: {
      //監視対象とするファイル
      files: "./less/default.less",
      //変更があったらlessコンパイルの開発版を実行する
      tasks: ['less:development']
    },

  });

  //引数をなにもつけないでgruntを実行したときは、watchを実行する
  grunt.registerTask("default", ["watch"]);
}

grunt実行

$ grunt
Running "watch" task
Waiting...[1]    1435 bus error  grunt

ふぇっ。
調べたら、OS 10.9でのエラーみたい....。Mavericksにしてからいいことあんまないんだけど。
https://github.com/gruntjs/grunt-contrib-watch/issues/228
node.jsの0.10.21でbugfixされているみたいなので、node.jsのアップデートをする。

$ brew update node
$ node -v
v0.10.21

$ grunt
Running "watch" task
Waiting...OK
>> File "less/default.less" changed.

Running "less:development" (less) task
File ./css/sample.css created.

Done, without errors.
Completed in 0.424s at Thu Oct 31 2013 19:13:44 GMT+0900 (JST) - Waiting...

でけたー!!!!!!!!!!
control + c でwatchを止める。

運用

普段はwatchしてコンパイルさせて、最終版のときにless:productionでコンパイルしてコミットする。
package.jsonについても書こうと思ったけど、今日はここで力尽きた。
昨日から長かった....。


WEB+DB PRESS Vol.77

WEB+DB PRESS Vol.77

  • 作者: 中川勝樹,山内沙瑛,舟崎健治,吉荒祐一,今井雄太,八木橋徹平,安川健太,近藤宇智朗,奥野幹也,天野祐介,賈成カイ,伊藤直也,住川裕岳,北川貴久,菅原一志,後藤秀宣,久森達郎,登尾徳誠,渡邊恵太,中島聡,A-Listers,小俣裕一,はまちや2,川添貴生,石本光司,舘野祐一,沖田邦夫,澤村正樹,卜部昌平,吉藤博記,片山暁雄,平山毅,WEB+DB PRESS編集部
  • 出版社/メーカー: 技術評論社
  • 発売日: 2013/10/24
  • メディア: 大型本
  • この商品を含むブログ (2件) を見る
Sass+Compass特集のモダンなCSSを書くためにってところおもしろかった。
あとクックパッドの社内の情報共有、発信の記事も興味深かった。