なんか自動化ツール

• Grunt: The JavaScript Task Runner
• grunt.js - Grunt入門 - Qiita [キータ]
• Gruntで始めるWeb開発爆速自動化入門（3）：Gruntで独自タスクを定義し、独自プラグインをnpmモジュールとして作成・公開するには (1/2) - ＠IT

インストールという表現よりも使うというほうが正しいか？

まずグローバルに grunt-cli というツールをぶち込む

$ npm install -g grunt-cli

init で package.json を生成する。これで npm のローカルインストールの履歴をつける

$ npm init

こんな感じのファイルが生成される

{
  "name": "piyo",
  "version": "0.0.0",
  "description": "piyopiyo",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"foooooo\""
  },
  "author": "",
  "license": "ISC",
}

grunt のインストール。–save-dev オプションをつけることでインストールと同時にpackage.jsonに追記してくれる

$ npm install grunt --save-dev

これで準備完了

ファイルを保存したら何かを自動実行する。開発中ならば是非やりたい機能だ。 まずファイル監視のプラグインをぶち込む

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

そして何かをするということだが、今回はとりあえずなんでも出来るようにコマンドを実行するということをする。 コマンド実行用のプラグインをぶち込む

$ npm install grunt-exec --save-dev

設定を書く Gruntfile.jsを用意して動作設定を書く

module.exports = function(grunt){
  grunt.initConfig({
    watch: {
      piyo: {
        files: ['**/*.*'],
        tasks: ['exec:echo']
      }
    },
    exec: {
      echo: {
        command: 'echo "piyo"'
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-exec');
};

設定としては置いてあるディレクトリの中の全ファイルを監視して、変化があったら echo するという内容にしてみた。 この command の部分を変えればいろいろなことができるようになるだろう

設定ができたので実行してみる

$ grunt watch

これで監視が始まるので、ファイルを変化させてみると端末にpiyoとでるのが確認できる。