質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • gulp

    280questions

    gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

  • Browserify

    32questions

Gulpでエラー発生時にwatchを継続したい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 3
  • VIEW 2,384

notable

score 397

Gulpでbrowserifyやbabelifyなどを使ってReactのソースをビルドしているんですが、
対象のJavaScriptファイルに単純な構文エラー(カッコが足りない、JSXの構文ミスなど)が発生すると
gulp.watchが止まってしまいます。

gulp-plumberを使うと継続できる、とか、
.on('error', function(){})でハンドリングできる、など
いくつか対策を見つけたのですが、watchが止まる状況は変わりませんでした。

Gulpの知識が無いので、記述が良くなくて効果が無いだけなのかもしれないのですが、
Gulp+Browserify+babelify+uglify+Reactな環境でエラー発生後もwatchが継続できるように
gulpfile.jsを記述したいです。

gulpfile.js
gulp.task('build', function() {
    return gulp.src('src/js/*.js')
        .pipe(plumber())
        .pipe(through2.obj(function(file, encode, callback){
            browserify(file.path)
                .transform(babelify)
                .bundle(function(err, res){
                        file.contents = res;
                        callback(null, file)
                })
                .on('error', console.log('error'))
        }))
        .pipe(uglify({preserveComments: 'some'}))
        .pipe(gulp.dest('./build/js/'));
});

  "devDependencies": {
    "babelify": "^6.3.0",
    "browser-sync": "^2.9.6",
    "browserify": "^11.2.0",
    "del": "^2.0.2",
    "gulp": "^3.9.0",
    "gulp-plumber": "^1.0.1",
    "gulp-uglify": "^1.4.1",
    "gulp-watchify": "^0.5.0",
    "react": "^0.13.3",
    "run-sequence": "^1.1.4",
    "through2": "^2.0.0",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0",
    "vinyl-transform": "^1.0.0"
  }
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

修正すべき箇所は2点です。

* 発生した例外errを適切にcallbackに渡してください。
errorイベントを追加する場所を、bundle後から、uglify直前にしてください。

以下のようなgulpfile.babel.jsで、監視が継続することをできます。

gulpfile.babel.js
import gulp from 'gulp'
import plumber from 'gulp-plumber'
import through2 from 'through2'
import browserify from 'browserify'
import babelify from 'babelify'
import uglify from 'gulp-uglify'

gulp.task('default',['build','watch'])
gulp.task('watch',()=>{
  return gulp.watch('src/js/*.js',['build'])
})
gulp.task('build',()=>{
  return gulp
  .src('src/js/*.js')
  .pipe(plumber())
  .pipe(through2.obj(function(file,encode,callback){
    browserify(file.path)
    .transform(babelify)
    .bundle(function(err,res){
      if(err){
        return callback(err)
      }
      file.contents = res
      callback(null,file)
    })
  }))
  .on('error',function(error){
    console.log(error.message)
    this.emit('end')
  })
  .pipe(uglify({preserveComments:'some'}))
  .pipe(gulp.dest('./build/js/'))
})

src/js/index.js
import React from 'react'
export default class Component extends React.Component{
  render(){
    // return <div>ok</div>
    return <div>{syntax error!}</div>
  }
}

gulp
# [10:33:46] Requiring external module babel-core/register
# [10:33:46] Using gulpfile ~/Downloads/hoge/gulpfile.babel.js
# [10:33:46] Starting 'build'...
# [10:33:46] Starting 'watch'...
# [10:33:46] Finished 'watch' after 11 ms
# /Users/59naga/Downloads/hoge/src/js/index.js: Unexpected token (5:24) while parsing file: /Users/59naga/Downloads/hoge/src/js/index.js
# [10:33:46] Finished 'build' after 98 ms
# [10:33:46] Starting 'default'...
# [10:33:46] Finished 'default' after 15 μs

参考
For reference, it was the this.emit('end'); that is now needed: - Watch stops on errors (Figure out better error handling) · Issue #259 · gulpjs/gulp

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/10/28 15:32

    解決できました!
    ありがとうございます!!

    キャンセル

0

gulp.watchが止まってしまいます。
これは、gulpコマンドそのものが停止してしまうのでしょうか?
それともgulpコマンドは実行されたままjavascriptファイルを変更してもタスクが実行されなくなる現象でしょうか?

後者の場合、一度、run-sequencebrowser-syncが原因で
JSHintでエラー/ワーニングがあるとjavascriptファイルを変更しても一切タスクが実行されなくなる (watchされなくなる?)」という現象に出遭ったことがあります。
これは、browserSync.reload(){stream: true, once: true}というオプションを与えることで解決しました。

gulpそのものは止まらないが、jshintなどでエラーがあるとjsファイルのwatchが認識されなくなったパターン
var gulp        = require("gulp"),
    /* 中略 */
    browserSync = require('browser-sync'),
    reload      = browserSync.reload;

// watch で実行されるjavascriptのタスク
gulp.task('js', function(cb) {
  runSequence('jshint', 'js.build', reload);
  // ↑ reloadを指定すると、最後に cb を追加するとエラーになってしまう。
});

// watch
gulp.task('default', function() {
  gulp.watch([devDir + '/js/**/*.js'], ['js']);
});

browserSync.reload(){stream: true, once: true}というオプションを与えることで解決したパターン
var gulp        = require("gulp"),
    /* 中略 */
    browserSync = require('browser-sync');

// reloadを別タスク化
gulp.task('reload', function() {
  return gulp.src('/')
    .pipe( browserSync.reload({stream: true, once: true}) );
});

// watch で実行されるjavascriptのタスク
gulp.task('js', function(cb) {
  runSequence('jshint', 'js.build', 'reload', cb);
});

// watch
gulp.task('default', function() {
  gulp.watch([devDir + '/js/**/*.js'], ['js']);
});

問題が、gulpコマンドそのものが停止してしまうであると的はずれな回答となりますが、
gulpは実行されたままwatchされなくなっている場合は、この辺りが原因のこともあるかもしれません。

参考: Gulp JSHintでError Warningsが無い時だけ次のタスクを実行してリロードさせたい

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/10/08 09:15

    ありがとうございます。
    現象としては次のようなエラーが表示されてGulpそのものが止まります。

    gulp/node_modules/vinyl-fs/node_modules/vinyl/index.js:143
    throw new Error('File.contents can only be a Buffer, a Stream, or null.'

    run-sequenceやbrowser-syncを使わない状態でも同じでした…

    キャンセル

  • 2015/10/08 16:42

    notable さん
    なるほど、そもそもgulpが止まってしまう問題でしたか...
    では、このケースは的はずれでしたね。。。
    エラーで検索したら下記のような感じのものもあったので何かしらヒントになるかもしれません。
    File.contents can only be a Buffer, a Stream, or null. #1
    https://github.com/hurrymaplelad/metalsmith-feed/issues/1

    引き続き、僕も調べてみたいと思います!

    キャンセル

関連した質問

  • 解決済

    jadeと同じディレクトリにhtmlを出力させたい

    gulpfile.jsの書き方についての質問です。 gulp.jsを使ってjade保存時にhtmlを出力させているのですが、そのときにhtmlが出力されるパスを、jadeと同じ場所

  • 解決済

    gulpでsass変換時にエラーがあると、動作停止してしまう

    sassの保存時に自動的にcssに変換してくれる処理を、gulpでやろうと思っています。 しかしgulpの動作中に、sassファイルにエラーとなる書き方をして保存したとき、エラーと

  • 解決済

    Gulp JSHintでError Warningsが無い時だけ次のタスクを実行してリロードさせたい

    gulp.watchでjavascriptのファイルを監視。変更があった時下記のような処理を行わせたいです。 1. JSHintでチェック 2. 問題がなければconcatなどで

  • 解決済

    gulpでのファイル削除やリネームについて

    いつもお世話になっております。 最近Gulpの便利さに感動して、使い方を勉強中です。 よろしければご回答お願いします。 フォルダ階層 project ├── no

  • 解決済

    ejs: 出力されたファイルがHTML形式にならない

    前提・実現したいこと ejsを使ってHTMLファイルを出力 発生している問題・エラーメッセージ 出力されたファイルがejs形式 該当のソースコード var gul

  • 解決済

    gulp の watch 制御

    gulp で imagemin を使用して画像を圧縮しているのですが、 ひとつ画像が増える(もしくはアップデートする)と 対象フォルダの全画像に対して圧縮をかけてしまうので、 画像

  • 解決済

    gulpで画像を同時に削除したい

    前提・実現したいこと gulpで「src」フォルダをwatchして、コンパイルや画像圧縮などをして「product」フォルダに出力しているようにしています。 今回実現したいのは、た

  • 解決済

    gulp-tapの動作について

    gulpでMarkdownをEJSテンプレートに入れてhtmlに変換しています。 外部の変数や自身のパスなどをテンプレートに渡すためgulp-tapを用いたいのですが、すべてのMa

同じタグがついた質問を見る

  • gulp

    280questions

    gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

  • Browserify

    32questions