Gulp v4に更新してみました

かれこれ3年ぐらいGulpを使ってますが、気づいたらv4になってたんですねぇ。

ってことで、v3からv4に切り替えてみました。

調べてるとBabelが使えるとのことなので、新しく書き直して使えるようにしてみました。

タスクの実行処理を書く

試しにSassのタスクでもしてみましょう。

まずは、必要なものをダウンロードしましょう。

$ npm install [email protected] --save-dev

v4をインストールするためには[email protected]にする必要があります。

次にSassもインストールします。
ここではgulp-sassを使います。

$ npm install gulp-sass --save-dev

これでひとまず、gulpfile.jsを作れますね。

あ、今回はBabelを使った書き方なので、さらに必要なものをインストールする必要がありますね。

まずは、Babelを使うために、babel-preset-es2015をインストールしましょう。
Babelを使うために、必要なものをインストールしましょう。

※下記コマンドの修正(2018/08/10)

$ npm install --save-dev babel-register babel-preset-es2015

そして、gulpfile.jsを作成する場所の同じところに、.babelrcを作成して以下を書きます。

{
    "presets": ["es2015"]
}

これで一通りものは揃ったのですが、Babelを使った方法の場合、gulpfile.jsでは使えないので、ファイル名をgulpfile.babel.jsにする必要があります。

では、gulpfile.babel.jsを作成して、タスクを書いていきましょう。

gulpfile.babe.jsにタスクを書く

import gulp from "gulp";
import sass from "gulp-sass";

// Sassのタスク
export function mySass() {
    return gulp.src("scss/*.scss")
        .pipe(sass({
            outputStyle: 'expanded',
            includePaths: [
                "scss/"
            ]
        })
        .pipe(gulp.dest("css"));
}

// ファイルを監視するタスク
function watchFiles() {
    gulp.watch("scss/*.scss", mySass);
}
export { watchFiles as watch };

適当にscss/app.scssなどのscssファイルを作成して
以下のコマンドを実行して確認してみよう。

$ gulp watch

scssファイルを変更してみて、cssファイルが作成されたらOKですね。

Babelの書き方で何が変わったのか？

まぁコードを見ると一目瞭然ですが、require()ではなくimportで書けることと、
タスクの処理がexportを使った書き方になってるんですよね。

これの書き方が最初慣れなくて躓いてたのですが、gulp.task()も普通に使えるので、あまり深く考えないようにして調整したりしてます。

あー、あと前まではできなかった、並列処理が使えるようになってます。

// タスクを順番に実行する
gulp.series('task1', 'task2');

// タスクの並列処理
gulp.parallel('task1', 'task2');

// 合わせて処理
gulp.series('task1', 'task2', gulp.parallel('task3', 'task4'));

並列処理できるは地味に嬉しい機能です。

簡単な解説ですが参考になれば幸いです。