Help us understand the problem. What is going on with this article?

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が効くのがすばらしいです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away