Web Starter Kit で JavaScript のライブラリを利用しようとしたらエラーで gulp のサーバーが止まってしまう場合の対応

2014-07-05

Web Starter Kit で JavaScript のライブラリを利用しようとしたらエラーで gulp のサーバーが止まってしまう場合の対応

Google が提供している、ウェブサイトを構築するためのツール、 Web Starter Kit。

レスポンシ対応のマルチデバイスボイラープレートなので、サイト構築のための準備部分の設定とか楽だろうなと思い、テストがてら触ってみた。

gulp の設定ファイルが入っているので、利用するとローカルサーバーでライブリロードもついてて、便利！なのはいいのですが、 JavaScript のコードを書いていると何やらエラーがでて、gulp のストリームも止まってしまうため、ローカルサーバー落ちてしまう状態に。

今回はそのエラーが出てもサーバーが止まらないようにする対応などをメモ。

エラーの原因は JSHint の設定

JavaScript のコードがちゃんとしたコードで書かれていないと、問題あるよーと教えてくれるチェックツールで、Web Starter Kit の gulp でも導入されています。

JSHint の設定は .jshintrc に書かれています。

.jshintrc の中身

{
  "node": true,
  "browser": true,
  "esnext": true,
  "bitwise": true,
  "camelcase": true,
  "curly": true,
  "eqeqeq": true,
  "immed": true,
  "indent": 4,
  "newcap": true,
  "noarg": true,
  "quotmark": "single",
  "undef": true,
  "unused": "vars",
  "strict": true,
  "trailing": true,
  "smarttabs": true
}

この設定だと、例えば jQuery を利用したり、 Backbone.js などの JavaScript ライブラリを利用するような場合にもエラーとなってしまいます。

jQuery や Backbone、 _ などを書くとエラーがでてしまいます。

これらが入っていていても、それは大丈夫！問題ない！としておくためには、設定にちょっとだけ記述を加える必要がるのです。

jQueryは true ってことでよいらしいので、 Backbone も同じように下記にしてみたのですが、エラー。

エラーになった .jshintrc の中身

{
  "node": true,
  "browser": true,
  "esnext": true,
  "bitwise": true,
  "camelcase": true,
  "curly": true,
  "eqeqeq": true,
  "immed": true,
  "indent": 4,
  "newcap": true,
  "noarg": true,
  "quotmark": "single",
  "undef": true,
  "unused": "vars",
  "strict": true,
  "trailing": true,
  "smarttabs": true,
  "jquery": true,
  "_": true,
  "Backbone": true
}

おやぁ、どうするんだ？と調べてみたところ

JavaScript - JSHint入門 - JSHintを使ってJSコードの信頼性を高める - Qiita

globals で指定するようなので、いれて試した。

.jshintrc の中身

{
  "node": true,
  "browser": true,
  "esnext": true,
  "bitwise": true,
  "camelcase": true,
  "curly": true,
  "eqeqeq": true,
  "immed": true,
  "indent": 4,
  "newcap": true,
  "noarg": true,
  "quotmark": "single",
  "undef": true,
  "unused": "vars",
  "strict": true,
  "trailing": true,
  "smarttabs": true,
  "jquery": true,
  "globals": {
    "$": false,
    "jQuery": false,
    "_": false,
    "Backbone": false
  }
}

$ や jQuery も一応追加。 false にしておくと、ローカルでの上書きをできないようにする設定になるとのこと。

これでチェックかけてみたところエラーはでなくなった。これならよさそうだ。

JSHint のエラーで gulp の stream を止めないようにするには？

Web Starter Kit の $ gulp serve でローカルのサーバーを動かしているときに、 JSHint のエラーにひっかかると Stream がとまってしまう（ローカルサーバーが落ちる）

.jshintrc に設定を加えただけでは、 jshint にエラーが出た際のこの Stream が終わってしまう現象は回避できなかった。

ちょっと調べてみたところ、 issues に同じような問題がでていた。

jshint.reporter('fail') when used in an async task doesn't fail the build · Issue #28 · spenceralger/gulp-jshint

チケットは close になっているようなのですが、この問題でもあがっている件、どうやっても $.jshint.reporter('fail') をやると stream が止まってしまうのが改善されない。

私の設定がわるいのかなんなのか。

一応チケットにあった方法をためしてみたのですが、何をしても false に分岐されてしまうようで、 jshint.reporter('fail') を表示してくれない。

もう少し対処方法は模索してみますが、ひとまずは該当箇所をコメントアウトするか削除するかしておくと良さそうです。

gulpfile.js の jshint 部分

// Lint JavaScript
gulp.task('jshint', function () {
    return gulp.src('html/scripts/**/*.js')
        .pipe($.jshint())
        .pipe($.jshint.reporter('jshint-stylish'))
        // .pipe($.jshint.reporter('fail'))
        .pipe(reload({stream: true, once: true}));
});

これで stream を止めることなく進めることができそうです。

参照：

エラーの原因は JSHint の設定

.jshintrc の中身

エラーになった .jshintrc の中身

.jshintrc の中身

JSHint のエラーで gulp の stream を止めないようにするには？

gulpfile.js の jshint 部分

関連記事