Grunt で CoffeeScript と Sass をコンパイル

JavaScript

最近、Rails の CoffeeScript や Sass のコンパイルをアセットパイプラインではなく Grunt でやりたくなったんで、Grunt を試してみた。

まず Grunt をインストール。

npm install -g grunt-cli

CoffeeScript と Sass をコンパイルするタスクは Grunt 公式の contrib タスクで提供されているので、 それらもインストール。

npm install grunt-contrib-coffee
npm install grunt-contrib-sass
npm install grunt-contrib-clean

Rails プロジェクトのルートディレクトリに Gruntfile.js を作成。

module.exports = function(grunt) {
  grunt.initConfig({
    coffee: {
      compile: {
        files: {
          "public/assets/application.js": [
            "app/assets/javascripts/home.coffee",
            "app/assets/javascripts/lists.coffee",
            "app/assets/javascripts/tasks.coffee"
          ]
        }
      }
    },
    sass: {
      dist: {
        files: {
          "public/assets/application.css": [
            "app/assets/stylesheets/devise.css.scss",
            "app/assets/stylesheets/home.css.scss",
            "app/assets/stylesheets/lists.css.scss",
            "app/assets/stylesheets/tasks.css.scss",
            "app/assets/stylesheets/scaffolds.css.scss"
          ]
        }
      }
    },
    clean: ["public/assets"]
  });

  grunt.loadNpmTasks("grunt-contrib-coffee");
  grunt.loadNpmTasks("grunt-contrib-sass");
  grunt.loadNpmTasks("grunt-contrib-clean");

  grunt.registerTask("default", ["clean", "coffee", "sass"]);
};

古い出力ファイルを削除してから CoffeeScript と Sass をコンパイルするように、 デフォルトのタスクを設定したので

grunt

を実行すると、public/assets 下に application.js と application.css が出力された。 Rails で使う場合は、出力された application.js と application.css を読み込むように、ビューを修正すればいい。

アセットパイプラインでは CoffeeScript や Sass を編集すると、ブラウザを更新するだけですぐ反映されるけど、 Grunt では watch を使えば同様のことが可能。 Grunt への本格的な移行はまだ先だけど、 Grunt で CoffeeScript と Sass をコンパイルしても問題なさそうだな。