Yeomanで生成されるGrunt.jsを利用したlessのコンパイル方法

grunt-contrib-lessをインストール

$ npm install grunt-contrib-less --save-dev

--save-dev オプションをつけることで、ローカルの node_module にインストールされ、かつpackege.jsonにも自動的に追記される。

Grunt.jsを修正

修正ポイントは、以下。

lessタスクを作成する。

・・・
grunt.initConfig({

    // Project settings
    config: config,

    // lessタスクの作成：開始
    less: {
        style: {
            options: { cleancss: true },
            src: 'bower_components/bootstrap/less/bootstrap.less',
            dest: 'bower_components/bootstrap/dist/css/bootstrap.css'
        }
    },
    // lessタスクの作成：終了
・・・

watchタスクにlessタスクを追加する。

・・・
        watch: {
            // lessタスクの追記：開始
            less: {
                files: ['bower_components/bootstrap/less/*.less'],
                tasks: ['less'],
                options: {
                    livereload: true
                }            },
            // lessタスクの追記：開始
            bower: {
                files: ['bower.json'],
                tasks: ['bowerInstall']
            },

・・・

上記設定では、 less ファイルに変更が加わった後、 less タスクを実行した後、 ブラウザをリロードする ことが行える。