LoginSignup
8

More than 3 years have passed since last update.

posted at

updated at

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

追記(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');

//sasscssに変換して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();
  });

//pughtmlに変換
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にしましたが、何でも大丈夫

//sasspugの監視をして変換処理させる
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
//sasscssに変換して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の書き方の参考

autoprefixerの書き方参考

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

参考になれば幸いです!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
8