gulp4.0にしました。

大きい案件が始まるので、開発環境を整理したいと思っていたのですが、いろいろ考えた結果gulpのバージョンを4.0にしてみることにしました。

悩んでたこと

ページ数の多い案件はgulp、ejsを使ってhtmlにコンパイルするっていう開発をしていました。ですが、ページ数が多くなるとリロードが遅くなったり、何度もリロードされたり不安定な挙動でした。

原因はhtmlが変更されたらオートリロードが走るっていう記述のせいで、ejsでhtmlをたくさん吐き出すと毎回オートリロードが走ってしまい不安定な挙動になっていました。

そこで、htmlが変更されたタイミングではなくて、ejsが変更されてタスクが終わった後にオートリロードを走らせる処理に変更したいなあ、と考えていました。

やりたかったこと

gulpのタスクの実行順を指定したかったのですが、いろいろ調べているみると、

・ run-sequenceを使う方法

・ gulpのバージョンを4.0にあげて'gulp.series'を使う方法が見つかりました。

run-sequence
複数タスクの並列／直列処理が設定できます。

www.npmjs.com

せっかくなのでgulp4.0の勉強も兼ねてバージョンをあげてみることにしました。

gulp v4.0

そもそもgulpのタスクは非同期で実行されるから高速なのかなあ、と勘違いしていたのですが、ドキュメントを読んでみると

If more than one task is listed, Gulp will execute all of them concurrently, that is, as if they had all been listed as dependencies of a single task.

タスクは非同期ではなくて並列で実行されるみたいです。勘違いをしていました。

並列で実行されることを踏まえてgulp4.0の気になった変更点を軽くまとめます。

gulp.series,gulp.parallelで直列/並列の処理
タスクに渡す関数の制約
gulp.taskの引数

その他の変更点は以下で確認してください。。。
https://github.com/gulpjs/gulp/blob/4.0/CHANGELOG.md

1.gulp.series,gulp.parallel

gulp.seriesでタスクの直列処理、gulp.parallelでタスクの並列処理ができるようになりました。

gulp.series

gulp.task('default', gulp.series('build', 'server'));

buildのタスクが終わってからserverのタスクが動きます。

gulp.parallel

gulp.task('build', gulp.parallel('css', 'js', 'html'));

css,js,htmlのタスクは並列に実行されます。

2.タスクに渡す関数の制約

タスクに渡す関数の制約ができたみたいです。

最後にcallbackを実行する
streamを返す
Promiseを返す
child processを返す
observableを返す

をしないとエラーになってしまいます。

例えば、 sassのタスクですが、

gulp.task("sass", () => {
    gulp.src(`${SRC}/scss/**/*.scss`)
        .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
        .pipe(sass())
        .pipe(autoprefixer({browsers: ['last 6 versions']}))
        .pipe(gulp.dest(`${DEST}assets/css/`))
});

この書き方だと

The following tasks did not complete: sass
Did you forget to signal async completion?

こんなエラーが出てしまいます。

そのため非同期タスクにするためにstreamを返すように以下のように変更すると上手くいきました。（returnをつけてあげます）

gulp.task("sass", () => {
    return gulp.src(`${SRC}/scss/**/*.scss`)
        .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
        .pipe(sass())
        .pipe(autoprefixer({browsers: ['last 6 versions']}))
        .pipe(gulp.dest(`${DEST}assets/css/`))
});

3.gulp.taskの引数

gulp.taskの引数が最大2つになりました。

gulp v4.0の使い方

1, gulp4.0のインストール

α版なのでローカルにgulp4.0をインストールします。

npm install gulpjs/gulp#4.0 -D

2, npm scriptにgulpを登録

ローカルにインストールしているのでnpm runコマンドでgulpが実行できるようにpackage.jsonを編集します。

"scripts": {
    "gulp": "gulp"
  },

3, gulpfile.jsの編集

好きなタスクを書いてください。

4, 実行

コマンドで npm run gulp と叩くと実行できるはずです。

最後に作ったgulp4.0の環境です。

GitHub - cidermitaina/starter-kit: html5 starter-kit

不具合があるかもですが、誰かの参考になれば嬉しいです。