Gruntの使い方：ファイルを監視しタスクを自動実行する

前回の続きです。
コマンドプロンプトを package.json のあるプロジェクトフォルダへ移動しておいてください。

Gruntfile.js を開いて grunt.initConfig に「grunt-contrib-watch」のプラグインを追加します。

module.exports = function(grunt) {
  grunt.initConfig({
    cssmin: {
      compress: {
        files: {
          './css/min.css':['css/reset.css','css/style.css']
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-watch');
};

次に監視のためのタスク「watch」を追加します。

module.exports = function(grunt) {
  grunt.initConfig({
    cssmin: {
      compress: {
        files: {
          './css/min.css':['css/reset.css','css/style.css']
        }
      }
    },
    watch: {
      files:['css/*.css'],
      tasks:['cssmin']
    }
  });
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-watch');
};

※タスク「cssmin」の最後の「}」の後にカンマを忘れないよう注意。

次に下記のコマンドを入力してください。

grunt watch

これで監視モードに入りました。
CSSファイルを適当に変更して保存すると自動的にcssminが実行されます。

次回は自動化をさらに楽にします。