LESSファイルを監視してCSSファイルに自動コンパイルする環境を構築

投稿日：

less_to_cssCSSフレームワークの「Bootstrap」をベースにして、CSSを動的に生成する言語「less」の環境を構築したときの覚書。

環境： CentOS 5.9 x86_64, Node.js v0.10.20, Grunt 0.4.1

サーバー側でlessファイルからcssファイルにコンパイルするためにはnode.jsの環境が必要。node.jsはnvm (Node Version Manager) 経由でインストールする。

gitが必須らしい
# yum install git

nvmをインストール
# wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

ここで一旦ログアウト＆ログイン

nodejsをインストール
# nvm install v0.10.20

デフォルトでv0.10.20を使うようにする
# nvm alias default 0.10.20

lessファイルをcssファイルにコンパイルするソフトをインストール
# npm install -g less

 

試してみる
# cd /home/projects/hoge/
# lessc less/hoge.less css/hoge.css

 

次はlessファイルを監視して、保存と同時にcssファイルにコンパイルする環境を作る。

参考にしたサイト

手順

  1. タスク管理ツール「Grunt」をインストール
  2. LESSをCSSにコンパイルするGruntプラグイン「grunt-contrib-less」をインストール
  3. ファイルを監視して更新を検知するGruntプラグイン「grunt-contrib-watch」をインストール

 

Gruntのコマンドラインツールをインストール
# npm install -g grunt-cli

Grunt本体とプラグインをインストール
# cd /home/projects/hoge/
# npm install grunt --save-dev
# npm install grunt-contrib-less --save-dev
# npm install grunt-contrib-watch --save-dev

save-devオプションは開発に必要な依存関係をpackage.jsonに書き出してくれる。Gruntのプラグインをインストールするときは付けておいた方がいいらしい。

まずはgrunt-contrib-lessだけで試してみる
# vi Gruntfile.js

module.exports = function(grunt){
    // Load plugins
    grunt.loadNpmTasks("grunt-contrib-less");

    grunt.initConfig({
        less : {
            dist : {
                options : {
                    compress : true
                },
                files : {
                     "path/to/result.css": "path/to/source.less"
                }
            }
        }
    });
};

実行
# grunt less:dist

ファイル監視用の設定を追記する
# vi Gruntfile.js

module.exports = function(grunt){
    // Load plugins
    grunt.loadNpmTasks("grunt-contrib-less");
    grunt.loadNpmTasks("grunt-contrib-watch");

    grunt.initConfig({
        less : {
            dist : {
                options : {
                    compress : true
                },
                files : {
                     "path/to/result.css": "path/to/source.less"
                }
            }
        },
        watch : {
            less : {
                files : ["path/to/*.less"],
                tasks : ["less:dist"]
            }
        }
    });
};

実行
# grunt watch:less

フォルダ内のlessファイルを全てcssファイルに変換したいので、最終的にはこれ

module.exports = function(grunt){
    // Load plugins
    grunt.loadNpmTasks("grunt-contrib-less");
    grunt.loadNpmTasks("grunt-contrib-watch");

    grunt.initConfig({
        less : {
            dist : {
                options : {
                    compress : true
                },
                files : [{
                    expand: true,
                    cwd: '/pass/to/less',
                    src: ['*.less'],
                    dest: '/pass/to/css',
                    ext: '.css'
                }]
            }
        },
        watch : {
            less : {
                files : ['/pass/to/less/*'],
                tasks : ['less:dist']
            }
        }
    });
};

 

 

< Related Posts >