TypeScriptやSassやEJSのビルドエラー時にGulpのタスクが終了しないようにする方法

• 「Angular2のリリース用ソースをgulp + webpack + inlineNg2Templateで1ファイル+αに圧縮してみる」
• 「Angular2開発をTypeScript+Sass+ejsで行う & gulpでsrcと別ディレクトリに構築」

前回と前々回の上記記事で構築した環境でAngularの開発を行っていると、ビルドエラーが発生しただけでgulpのタスクが停止してしまうことに気づきました。
ビルドエラーが発生しても、コンソールにエラー表示がされるだけでタスクは停止しないように対応したいと思います。

※執筆時点で過去記事のgulpfile.jsは対応版に修正済

今回やりたいこと

1. TypeScriptのビルドエラーが発生してもGulpのタスクが停止しないようにする
2. Sassのビルドエラーが発生してもGulpのタスクが停止しないようにする
3. EJSのビルドエラーが発生しても(以下略

コーディング開始

Sassの場合

めちゃくちゃ簡単です。

.on('error', sass.logError)

上記をsassのタスクに追加するだけでOK。以下が例となります。

gulpfile.js

gulp.task('sass', function () {
  var processors = [cssnext()];
  return gulp.src(conf.gulp.srcDir + '/**/*.sass', {base: conf.gulp.srcDir})
    .pipe(sass().on('error', sass.logError))  //この行を追加するのみ！
    .pipe(postcss(processors))
    .pipe(minifycss())
    .pipe(gulp.dest(conf.gulp.srcDir))
});

TypeScript、EJSの場合

gulp-plumberを利用します。

コンソールで実行

npm i gulp-plumber --save-dev

下記をTypeScriptやEJSのタスクに追加すればOK。

.pipe(plumber())

前回の記事で利用したgulpfile.jsでタスクの記述例を示します。

gulpfile.js

var plumber = require('gulp-plumber'); //gulp-plumberを読み込み *****************
～省略～

gulp.task('local-ejs', function () {
  return gulp.src(conf.gulp.srcDir + '/**/*.ejs')
    .pipe(plumber())  //この行を追加するのみ！****************************
    .pipe(ejs({type: "local"}, {"ext": ".html"}))
    .pipe(gulp.dest(conf.gulp.localDir));
});


gulp.task('local-ts', function () {
  var tsResult = gulp.src(conf.gulp.srcDir + '/**/*.ts', {base: conf.gulp.srcDir})
    .pipe(sourcemaps.init())
    .pipe(plumber()) //この行を追加するのみ！****************************
    .pipe(typescript(conf.ts.compilerOptions));
  tsResult.dts.pipe(gulp.dest(conf.gulp.localDir));

  return tsResult.js.pipe(sourcemaps.write("./"))
    .pipe(gulp.dest(conf.gulp.localDir));
});

以上です。

実行

コンソールから実行

gulp local

TypeScriptでのビルドエラー

問題なくタスクが継続します。

TypeScriptでのビルドエラー

[01:34:54] Starting 'local-ts'...
src\app\app.module.ts(8,19): error TS2304: Cannot find name 'MyApp2'.
[01:34:57] TypeScript: 1 semantic error
[01:34:57] TypeScript: emit succeeded (with errors)
[01:34:57] Finished 'local-ts' after 3.3 s

Sassでのビルドエラー

問題なくタスクが継続します。

Sassでのビルドエラー

[01:37:12] Starting 'sass'...
Error in plugin 'sass'
Message:
    src\css\common.sass
Error: Undefined variable: "$flex".
        on line 8 of src/css/common.sass
>>     display: $flex;
   -------------^

[01:37:12] Finished 'sass' after 23 ms

EJSでのビルドエラー

問題なくタスクが継続します。

EJSでのビルドエラー

[01:33:20] Starting 'local-ejs'...
[01:33:20] Plumber found unhandled error:
 Error in plugin 'gulp-ejs'
Message:
    ReferenceError: C:\works\eclipse\workspace\hello-taskqueue\angular\src\index.ejs:7
    5|     <meta name="viewport" content="width=device-width, initial-scale=1">
    6|
 >> 7|     <% if (atype == 'local') { %>
    8|       <script src="/node_modules/systemjs/dist/system.src.js"></script>
    9|       <script src="/systemjs.config.js"></script>
    10|       <script>

atype is not defined
[01:33:20] Finished 'local-ejs' after 30 ms

以上です。