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'));
並列処理できるは地味に嬉しい機能です。
簡単な解説ですが参考になれば幸いです。