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

- 「[Angular2のリリース用ソースをgulp + webpack + inlineNg2Templateで1ファイル+αに圧縮してみる](http://qiita.com/silverfox/items/825409b4046095e85190)」
- 「[Angular2開発をTypeScript+Sass+ejsで行う & gulpでsrcと別ディレクトリに構築](http://qiita.com/silverfox/items/ec649b2eb1d9e6b4e188)」

[前回](http://qiita.com/silverfox/items/ec649b2eb1d9e6b4e188)と[前々回](http://qiita.com/silverfox/items/825409b4046095e85190)の上記記事で構築した環境でAngularの開発を行っていると、<font color="red">ビルドエラーが発生しただけでgulpのタスクが停止してしまう</font>ことに気づきました。
ビルドエラーが発生しても、コンソールにエラー表示がされるだけでタスクは停止しないように対応したいと思います。

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

## 今回やりたいこと

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

## コーディング開始

### Sassの場合

めちゃくちゃ簡単です。

```js:
.on('error', sass.logError)
```
上記をsassのタスクに追加するだけでOK。以下が例となります。

```js: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](https://www.npmjs.com/package/gulp-plumber)を利用します。

```text:コンソールで実行
npm i gulp-plumber --save-dev
```


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

```js:
.pipe(plumber())
```

[前回の記事](http://qiita.com/silverfox/items/ec649b2eb1d9e6b4e188)で利用したgulpfile.jsでタスクの記述例を示します。

```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));
});
```

以上です。


## 実行

```text:コンソールから実行
gulp local
```

### TypeScriptでのビルドエラー

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

```text: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でのビルドエラー

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

```text: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でのビルドエラー

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

```text: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
```


以上です。