Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
7
Help us understand the problem. What is going on with this article?
@sam_sam

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

More than 1 year has passed since last update.

追記(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が動かなくなった時にとりあえず試したこと

参考になれば幸いです!

7
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
sam_sam

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
7
Help us understand the problem. What is going on with this article?