gulp環境構築 〜変更監視、トランスパイル中止抑制〜

前回の設定だと、js以外の変更時にはトランスパイルされないし、トランスパイル時にエラーが出ると止まってしまうからそれらを設定する。

変更監視

監視は単純にpugとsassをgulpのwatchタスクに書いてないからなのでのでここに新たに書いてやれば良い。

gulpfile.babel.js

〜 省略 〜
const paths = {
  allSrcJs: 'src/**/*.js',
  pug: 'src/pug/**/*.pug',
  sass: 'src/sass/**/*.sass',
  〜 省略 〜
};
〜 省略 〜
gulp.task('watch', () => {
  const watchList = [
    paths.allSrcJs,
    paths.sass,
    paths.pug,
  ];
  gulp.watch(watchList, ['main']);
});
〜 省略 〜

トランスパイル中止抑制

この監視状態の時、このままだとトランスパイルに失敗してエラーが出るとそのたびに監視が止まってしまい、いちいち実行し直さなければならなくなってしまう。
これは流石にめんどくさすぎるので、監視が止まらないようにする。

yarn add gulp-plumber

こいつがエラーが出た時に感知して、こんなエラーが出てるよってコマンドラインには出してくれた上で止まらないように計らってくれる。
使い方としては、トランスパイル系の処理のpipe処理の前に書いておく。
例

gulpfile.babel.js

〜 省略 〜
gulp.task('pug', () =>
  gulp.src(paths.pug)
    .pipe(plumber())　// ←ここに書く
    .pipe(pug({ pretty: true }))
    .pipe(gulp.dest(paths.html)),
);
〜 省略 〜

追記、この設定じゃだめだった。
plumber()だけだと、一度エラーを起こした後、動いてる様で動いてないというひどい状態になった
以下のやり方で回避できるみたい。
これ見る限り、plumberがエラーを吐いた後ゾンビるっぽい、エラーログ吐いた後に自身をendしてるし。
参考gulp-sass, gulp-plumberを使うときの注意

gulpfile.babel.js

const plumberOption = {
  errorHandler(error) {
    console.log(error.message);
    this.emit('end');
  },
}
〜 省略 〜
gulp.task('pug', () =>
  gulp.src(paths.pug)
    .pipe(plumber(plumberOption))　// ←ここに書く
    .pipe(pug({ pretty: true }))
    .pipe(gulp.dest(paths.html)),
);
〜 省略 〜

次回の予定

せっかくだからローカルサーバー建てて確認できるようにしたいよね。