GruntでCoffeeScriptとSCSSのファイルを監視して自動コンパイルしてみる

Grunt公式: http://gruntjs.com/

1. grunt-cliのインストール

$ npm install -g grunt-cli

2. 作業ディレクトリの作成

$ mkdir grunt_test
$ cd grunt_test

3. package.jsonの作成

vim package.json

4. package.json

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
  }
}

5. gruntと必要なプラグインのインストール

$ npm install grunt grunt-contrib-watch grunt-contrib-coffee grunt-contrib-sass --save-dev

* --save-devオプションをつけるとpackage.jsonの"devDependencies"を上書きしてくれるみたいです。
* "description"とか書いてないので警告が出ます。
* grunt-contrib-watch: https://github.com/gruntjs/grunt-contrib-watch
* grunt-contrib-coffee: https://github.com/gruntjs/grunt-contrib-coffee
* grunt-contrib-sass: https://github.com/gruntjs/grunt-contrib-sass

6. Gruntfile.jsの作成

$ vim Gruntfile.js

7. Gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        coffee: {
            compile: {
                expand: true,
                flatten: true,
                src: ['coffee/*.coffee'],
                dest: 'js',
                ext: '.js'
            }
        },
        sass: {
            compile: {
                expand: true,
                flatten: true,
                src: ['scss/*.scss'],
                dest: 'css',
                ext: '.css'
            }
        },
        watch: {
            coffee: {
                files: ['coffee/*.coffee'],
                tasks: ['coffee']
            },
            sass: {
                files: ['scss/*.scss'],
                tasks: ['sass']
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-coffee');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.registerTask('default', ['coffee', 'sass']);
};

8. 監視開始

$ mkdir coffee
$ touch coffee/hello.coffee
$ mkdir scss
$ touch scss/test.scss
$ grunt watch
Running "watch" task
Waiting...

9. coffee/hello.coffeeを編集

console.log 'hello'

10. コンパイルされたファイルを確認

$ more js/hello.js 
(function() {
  console.log('hello');

}).call(this);

11. scss/test.scssを編集

#main {
  h1{ margin: 10px }
  p{ font-size: 90% }
}

12. コンパイルされたファイルを確認

$ more css/test.css 
#main h1 {
  margin: 10px; }
#main p {
  font-size: 90%; }