Posted at

gruntでexpressをサクサク書く(watch, jshint, livereload)

More than 5 years have passed since last update.

作ったひな形は以下。

https://github.com/macoshita/grunt-express-server-sample

あとは、下記の通りコマンド叩けば勝手にリロードしたりjshintみたりする環境が出来上がります。

git clone https://github.com/macoshita/grunt-express-server-sample

cd grunt-express-server-sample
npm i
npm i grunt-cli -g # <- gruntを入れてない人向け
grunt server

chrome拡張のlivereloadとか入れとけば、コード書き換えると勝手にブラウザがリロードされます。これほんとサクサク書けるなー。


ハマったところ

どうも2014/01/29時点で、livereloadがうまく機能しない問題があるみたいです。

関連issue: https://github.com/ericclemmons/grunt-express-server/issues/36

原因はサーバプロセスが立ち上がる前にリロードにいっちゃう上記を読む限りはそこまで時間かからず直りそうな気もしますが、現在の対処としては以下のようにdelayを挟むのが紹介されてたので、それまではこれで。直ったらこのポストもアップデートしたいと思います。

module.exports = function(grunt) {

// ...

watch: {
// ...
express: {
files: jsFiles,
tasks: [ 'express:dev', 'delay' ],
options: {
nospawn: true,
livereload: true
}
}
// ...

grunt.registerTask('delay', 'Delay for express restart', function() {
setTimeout(this.async(), 1000);
});

// ...
};


読まなくていい

ちょっと触ってない間にgrunt-contrib-watchがすげー使いやすくなってた。livereloadが同梱になったのもいい感じだし、gruntfileのwatchが効くのがすばらしいです。