grunt.jsによるlessの自動css化メモ

もうlessファイルをいちいちcrunchでコンパイルしたくないんやー。
ということで
自動コンパイル＆minifyとか色々できちゃうgrunt.jsのメモ。
http://gruntjs.com/
動作環境はmac。node.js。

1.やりたいこと

・less/import.less // 内部でreset.less, var.less, mixins.less使用
・less/prize.less // 内部でmixins.less使用
・less/result.less // 内部でvar.less使用
・less/var.less // html上から単独呼び出し無し
・less/mixins.less // html上から単独呼び出し無し
・less/reset.less // html上から単独呼び出し無し
今回はこんなlessファイル達があるとして、
修正保存される度に下記cssファイルを吐き出したい。
・style/import.css
・style/import.min.css
・style/prize.css
・style/prize.min.css
・style/result.css
・style/result.min.css
var.cssやmixin.cssは必要無いよって話。

2.grunt.jsインストール

node.jsインストール済みとして、
ターミナルにて下記コマンド実行

sudo npm install -g grunt-cli

これで完了。かんたーん。
pcにインストールされるので1回だけでok。

3.grunt.jsの設定とか

grunt.jsやるには
package.json：設定ファイル。使用するプラグイン等記入。
Gruntfile.js：実行作業ファイル。処理内容記入。
が必要。

package.json

{
  "name": "testGruntApp",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-less": "*",
    "grunt-contrib-watch": "*"
  }
}

今回はlessのcss化と監視をするので、
プラグインは"grunt-contrib-less"と"grunt-contrib-watch"を使用。

Gruntfile.js

module.exports = function (grunt) {

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

  // watch less files name
  var arLessFileNamse = ['import','prize','result'];

  var arLessConfig = {};
  arLessFileNamse.forEach(function(val){
    arLessConfig[val] = {
      src: 'less/' + val +'.less',
      dest: 'style/' + val +'.css'
    };
    arLessConfig[val + 'Min'] = {
      options:{ yuicompress:true},
      src: 'less/' + val +'.less',
      dest: 'style/' + val +'.min.css'
    };
  });
//  console.log(arLessFileNamse);
//  console.log(arLessConfig);

  // setting
  grunt.initConfig({
    less: arLessConfig, 
    watch : {
      less : {
        files : ['less/*.less'],
        tasks : ['less']
      }
    }
  });

  // do task
  grunt.registerTask('default', [ 'less', 'watch']);
};

全ファイルcss化したく無いので、
配列arLessFileNamseにcss化したいlessファイル名を入れる方法にした。

4.実行

まず実行環境を整える。
下記コマンドでpackage.jsonに記入されてるプラグインのインストールとかやってくれる。
この作業はgrunt.jsインストールとは違い、各プロジェクトごとに必要。

sudo npm install

成功するとnode_modulesフォルダが作成され、
中に下記フォルダが作成されてるはず。
・grunt
・grunt-contrib-less
・grunt-contrib-watch

そしてそして、下記コマンドで
Gruntfile.jsに記入されてる監視＆ビルド実行

grunt

ターミナルが
Waiting...
表示になったら成功。
監視しているのでlessファイルを修正&保存すると自動的にcssファイルを吐き出してくれます。

最後に
control + c　で監視終了！
おつかれさまー。