gulp+pug+scss+autoprefixerのコンパイルが突然できなくなったので、gulp4に移行した話


追記（2018/12/11）
Gulp　4.0が正式にリリースされました↓
[Version 4.0 Now Default](https://medium.com/gulpjs/version-4-now-default-92c6cd4beb45)

Gulp4用に再度設定を見直しました→https://qiita.com/sam_sam/items/45db2c948e47e82a5386
（追記終わり）

---

「何もしてないのに壊れた」が本当に起きました。

- Mac 10.12.6
- VScode
- ターミナル

の環境で問題なく動いていたgulpが、突然謎のエラーでcssを書き出せない、最悪コンパイルも止まる現象が起きました。

今まで問題なく動いていたgulpfile.jsはこちらを参照↓
[compassを捨てて、gulp + sass + pug + auto-prefixerに移行しようとしてなかなかうまくいかなかった話](https://qiita.com/sam_sam/items/db56fb14f77296872aa8)

そして問題のエラー内容は下記↓

```ruby:ターミナル
events.js:167
      throw er; // Unhandled 'error' event
      ^
CssSyntaxError: /Users〜〜〜〜〜
```
この後に「cssの〜〜がおかしいよ〜」というメッセージが続くのですが、**cssを確認してもおかしくない**んですね。
何より数分前までこれで大丈夫だったのに、何回かscssを書き換えるたびに「events.js:167」のエラーが起きて強制終了。これは困りました。

##gulp4でpugとscssとautoprefixerが動くようになった環境と設定
とりあえず必要最低限のものだけを入れています。

- Node.js v10.10.0
- npm 6.4.1

```ruby:gulp4のインストール
npm install gulp@next -D
```

gulpのプラグインのバージョン↓

- "gulp": "^4.0.0"
- "gulp-autoprefixer": "^6.0.0"
- "gulp-plumber": "^1.2.0"
- "gulp-notify": "^3.2.0"
- "gulp-pug": "^4.0.1"
- "gulp-sass": "^4.0.1"

gulp4では今までのgulpfile.jsだと動いてくれないので、gulp4用に中身を書き換えました↓

```ruby:gulpfile.js
var gulp = require("gulp");
var sass = require("gulp-sass");
var plumber = require("gulp-plumber");
var notify = require("gulp-notify");
var pug = require("gulp-pug");
var autoprefixer = require('gulp-autoprefixer');

//sassをcssに変換してautoprefixer
gulp.task('sass', function(done) {
    gulp.src("./scss/**/*scss")
        .pipe(plumber({
            errorHandler: notify.onError("Error: <%= error.message %>")
        }))
        .pipe(sass({outputStyle: 'expanded'}))
        .pipe(autoprefixer({browsers: ["last 3 versions", "ie >= 9", "Android >= 4","ios_saf >= 8"]}))
        .pipe(gulp.dest("./css"))
    done();
  });

//pugをhtmlに変換
gulp.task('pug', function(done) {
    var option = {
        pretty: true
    }
    gulp.src("./pug/*.pug")
        .pipe(plumber({
            errorHandler: notify.onError("Error: <%= error.message %>")
        }))
        .pipe(pug(option))
        .pipe(gulp.dest("./"))
    done();
});

gulp.task('gulpt', gulp.series('sass', 'pug')); // taskの名前はgulptにしましたが、何でも大丈夫

//sassとpugの監視をして変換処理させる
gulp.watch(['./scss/**'], gulp.task('sass'));
gulp.watch(['./pug/**'], gulp.task('pug'));
```
これを

```ruby:ターミナル
npx gulp gulpt
```
で起動します。
「gulpt」のところは「gulpfile.js」で設定したtaskの名前を入れてください。（何でも大丈夫のところ）

ちなみに、コンパイルに失敗した時に通知するためのgulp-plumberとgulp-notify、ベンダープレフィックス用のautoprefixerを入れています。

##gulp4に移行する羽目になった経緯
とにかく検索をし色々試しましたが、gulpを**3.9.1**までバージョンアップしてもターミナルにエラーや「**npx audit fix**」が出続けて一向に先に進めない状態が続き、最終的にいつもの167のエラーが出てしまい八方塞がり。
「いっそ全部最新にしてしまおう！」のノリでgulp4に移行しました。


成功してよかった…（悩むこと3日）

##原因はなんだったのか
きっかけは結局わからないのですが、どうやら最終的にgulp-autoprefixerで引っかかっていたようでした。
gulp-sassもgulp-pugも動くのに、gulp-autoprefixerの記述をするとエラーを起こすといった具合です。
なので「gulpfile.js」のgulp-autoprefixerを別のtaskに入れていたものを今回はscssのtaskの中に記述しました。
抜粋↓

```ruby:gulpfile.js
//sassをcssに変換してautoprefixer
gulp.task('sass', function(done) {
    gulp.src("./scss/**/*scss")
        .pipe(plumber({
            errorHandler: notify.onError("Error: <%= error.message %>")
        }))
        .pipe(sass({outputStyle: 'expanded'}))
        .pipe(autoprefixer({browsers: ["last 3 versions", "ie >= 9", "Android >= 4","ios_saf >= 8"]})) // これをここに移動
        .pipe(gulp.dest("./css"))
    done();
  });
```

gulp4から記述方法が変わるとのことで避けていましたが、結果gulpfile.jsがかなりシンプルになったので結果オーライでした。

##参考になった記事
非常に助かりましたmm

- [Gulp v4 移行メモ](https://chaika.hatenablog.com/entry/2018/06/02/090000)
- [gulp v4.0.0がプレリリース！ 移行方法と変更点まとめ](https://satoyan419.com/gulp-v4/)
- [Gulp4を試す](https://trs.mn/blog/2018/08/12/gulp4/)
- [最新ビルドシステムGulp 4入門 〜環境構築からタスク作成まで〜](https://qiita.com/tonkotsuboy_com/items/9ab83fe0f25cf0b010f3)

taskの書き方の参考

- [gulpjs/gulp](https://github.com/gulpjs/gulp/blob/master/docs/API.md#gulptaskname-fn)

autoprefixerの書き方参考

- [GulpでSassのコンパイル・Autoprefixer・Minifyの実行をするまでの最低限のこと](https://html-coding.co.jp/knowhow/environment/gulp-sass/)

gulpが動かなくなった時にとりあえず試したこと

- [npmで怒られたエラー集まとめ。WARN[deprecated,unmet dependency,peerDependencies,EPEERINVALID,engine]ERR![missing,invalid],throw er; // Unhandled 'error' eventの解決方法。(2018/6/15更新)](https://qiita.com/M-ISO/items/d693ac892549fc95c14c#zsh-command-not-found-gulp)

参考になれば幸いです！