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

そもそも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

Sass+Compass特集のモダンなCSSを書くためにってところおもしろかった。
あとクックパッドの社内の情報共有、発信の記事も興味深かった。