8
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

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

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

// sasspugの監視をして変換処理させる
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');

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

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

// sasspugの監視をして変換処理させる
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が更新される...
の流れになります。

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

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
8
Help us understand the problem. What are the problem?