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

追記（2018/12/11）
Gulp　4.0が正式にリリースされました↓
Version 4.0 Now Default

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

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

Mac 10.12.6
VScode
ターミナル

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

今まで問題なく動いていたgulpfile.jsはこちらを参照↓
compassを捨てて、gulp + sass + pug + auto-prefixerに移行しようとしてなかなかうまくいかなかった話

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

ターミナル

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

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用に中身を書き換えました↓

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'));

これを

ターミナル

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の中に記述しました。
抜粋↓

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

taskの書き方の参考

gulpjs/gulp

autoprefixerの書き方参考

GulpでSassのコンパイル・Autoprefixer・Minifyの実行をするまでの最低限のこと

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

npmで怒られたエラー集まとめ。WARN[deprecated,unmet dependency,peerDependencies,EPEERINVALID,engine]ERR![missing,invalid],throw er; // Unhandled 'error' eventの解決方法。(2018/6/15更新)

参考になれば幸いです！