grunt-reloadを試す
grunt-reload導入
guard-livereloadはすでに導入済みとします。
私はChrome拡張をインストールしてます。
真ん中のリロードっぽいアイコンがそうです。
接続に成功すると真ん中の丸が、黒丸になります。
grunt-reloadインストール
$ npm install grunt-reload
プロジェクト直下のnode_modulesディレクトリにインストールされます。
grunt.jsファイルに
grunt.loadNpmTasks('grunt-reload');
を追加
module.exports = function(grunt) {
grunt.initConfig({
reload: {
port: 35729,
liveReload: {}
},
trigger: {
watchFile: 'index.html'
},
server: {
port: 8000,
base: '.'
},
watch: {
files: ['index.html', 'css/app.css', 'js/app.js'],
tasks: 'reload'
}
});
grunt.loadNpmTasks('grunt-reload');
grunt.registerTask('run', 'server reload watch');
};
実行すると
$ grunt run Running "server" task Starting static web server on port 8000. Running "reload" task reload server running at http://localhost:35729 Running "watch" task Waiting...
のように待ち状態になるので、ブラウザのlivereloadをクリックして認識させます。
Waiting...Sat Feb 09 2013 13:34:55 GMT+0900 (JST) Connection accepted.
Received Message: {"command":"hello","protocols":["http://livereload.com/protocols/connection-check-1"]}
Sat Feb 09 2013 13:34:59 GMT+0900 (JST) Connection accepted.
Connection acceptedと出るので認識されたのがわかると思います。
grunt.jsでwatchに指定したファイルを編集すると、自動的にブラウザをリロードしてくれます。やったー
grunt-contrib-coffeeを試す
CoffeeScript & Grunt インストール
すでに、nodeとnpmはインストール済みとします。
CoffeeScript インストール
$ npm install -g coffee-script
Grunt インストール
$ npm install -g grunt
GruntのCoffeeScriptプラグインをインストール
プロジェクトのディレクトリ直下にnode_modulesディレクトリを作っておきます。
$ mkdir node_modules
node_modulesディレクトリ以下にインストールされます。
$ npm install --save-dev grunt-contrib-coffee
GruntでCoffeeScriptを自動コンパイル
プロジェクト直下にgrunt.jsファイルを作成します。
grunt.js
module.exports = function(grunt) {
grunt.initConfig({
coffee: {
compile: {
files: {
'js/*.js': ['coffee/*.coffee']
},
options: {
bare: true
}
}
},
watch: {
files: ['coffee/*.coffee'],
tasks: 'coffee'
}
});
grunt.loadNpmTasks('grunt-contrib-coffee');
grunt.registerTask('default', 'coffee');
};
これでファイル変更を監視してCoffeeScriptをコンパイルしてくれます。
$ grunt watch
たとえば、coffee/app.coffeeを編集すると
Running "watch" task Waiting...OK >> File "coffee/app.coffee" changed. Running "coffee:compile" (coffee) task File js/app.js created. Running "watch" task Waiting...
js/app.jsを作ってくれます。
便利！
