Gulp4が正式リリースされたので、gulpfile.jsの中身を見直してみましたgulp4+pug+scss

Gulp3の時からgulpでpugとscssをコンパイルさせていたのですが、Gulp4が正式にリリースになったようなので、Gulp4用にgulpfile.jsを見直してみました。

前回の記事：gulp+pug+scss+autoprefixerのコンパイルが突然できなくなったので、gulp4に移行した話
※導入方法については今回省きます

---

Gulp(Getting Started): https://gulpjs.com/docs/en/getting-started/quick-start

---

環境

ディレクトリ構成

root/
　├ scss/hoge.scss
　├ css/hoge.css
　├ pug/fuga.pug
　└ fuga.html

各バージョン

"gulp": "^4.0.0",
"gulp-autoprefixer": "^6.0.0",
"gulp-notify": "^3.2.0",
"gulp-plumber": "^1.2.1",
"gulp-pug": "^4.0.1",
"gulp-sass": "^4.0.2"

##　今までに使っていた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('hoge', gulp.series('sass', 'pug')); // taskの名前はhogeにしましたが、何でも大丈夫

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

##　作り直したgulpfile.js

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

const { watch, series, task, src, dest } = require('gulp');

// sassをcssに変換してautoprefixer
task('sass', function(done) {
    return src("./scss/**/*scss")
        .pipe(plumber({
            errorHandler: notify.onError("Error: <%= error.message %>")
        }))
        .pipe(sass({outputStyle: 'expanded'}))
        // .pipe(autoprefixer({browsers: ["last 3 versions", "ie >= 11", "Android >= 4","ios_saf >= 10"]}))
        // ↑★2019/09/02エラーがでるようになったので不使用。詳しくはページ下記をご覧ください。
        .pipe(dest("./css"))
    done();
  });

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

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

task('hoge', series('sass', 'pug'));

これをターミナルから

ターミナル

npx gulp hoge

します。

変更点

毎度「gulp.」をつけていたのをやめた

新gulpfile.js

const { watch, series, task, src, dest } = require('gulp');

↑の設定を入れたので毎度「gulp.」を入れる必要がなくなりました

参考：Creating Tasks

gulp.src("〜をやめた

return src("〜に変更しました

参考：Async Completion

★2019/09/02　追記

taskをwatchしようとすると下記のエラーが出るようになったので、

  Replace Autoprefixer browsers option to Browserslist config.
  Use browserslist key in package.json or .browserslistrc file.

  Using browsers option cause some error. Browserslist config 
  can be used for Babel, Autoprefixer, postcss-normalize and other tools.

  If you really need to use option, rename it to overrideBrowserslist.

  Learn more at:
  https://github.com/browserslist/browserslist#readme
  https://twitter.com/browserslist

gulpfile.jsに対応させるブラウザを記入するのをやめ、https://github.com/browserslist/browserslist#readme を参考にpackage.jsonへ

package.json

"browserslist": [
    "last 3 versions",
    "ios_saf 8.1",
    "Android 4.0",
    "ie 11"
    ]

↑を追加しました。（追記終わり）

##　watch()の中にtask入れれば良いのでは問題
前回の投稿でご質問をいただき、確かにそうだと思いチャレンジしてみました。
参考：watch()
結果、できることはできるけれども別にした方が個人的に効率が良かったのでそのまま別にしておこうと言う結論に至りました。

新gulpfile.jsの設定のようにwatch()を別にしておくと、「ターミナルからtaskを走らせるのを忘れていた」間に更新し分を走らせた瞬間に一度コンパイルしてくれるメリットがあったからです。

scssを更新する→taskのhogeを走らせる→cssが更新される→scssを更新する→cssが更新される...

watch（）の中に入れてしまうと
scssを更新する→taskのhogeを走らせる→この時点でcssは更新されない→scssを更新する→cssが更新される...
の流れになります。

以上です。参考になれば幸いです！