BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. コーディング(html/css/JavaScript)
  5. gulp4に移行するためにタスクを書き換えてみた
by ウラカワ ウラカワ

gulp4に移行するためにタスクを書き換えてみた

gulp4に移行するためにタスクを書き換えてみた

こんにちは、ウラカワです。

今回は制作時の色々な処理を自動化してくれるGulpのお話です。

Gulp4はリリースされてからしばらく様子見してたのですが、ずるずるとGulp3のままでいきそうだったので、この機にGulp4に合わせて書き換えてみました。

  • CSS(Sass)変換圧縮
  • JavaScript(Webpack + Babel)変換圧縮
  • 画像圧縮

とりあえず上記のような、よく使う基本的なタスクを細かいものは削ってGulp4で書いてみます。

APIの変更点など

まずはGulp3からどう変わったのかを確認。

タスクの定義

task()は非推奨になり、exportsを使わなくてはいけないらしい。

task()でもまだ動きます。

直列・並列処理

series()が直列処理、parallel()が並列処理。

series(), parallel()を組み合わせて処理の順番を細かくコントロール可能で、ネストの制限は無いようです。

ファイルの監視

watch()がchokidarを使用したものに変更されたらしい。

gulp-watchはもう不要とのことですが、そもそも使ってなかった・・・。

オプションが充実してるので色々出来そうです。

ソースマップ

src(), dest()それぞれにsourcemapsオプションを指定するだけで良くなりました。

gulp-sourcemapsはもう不要です。

未変更ファイルのスキップ

src()のsinceオプションに指定した時間から変更されていないファイルをスキップ可能です。

lastRun()で最後にタスクが実行完了した時間を取得可能なので、それを指定することで未変更ファイルをスキップ可能・・・ということらしいです。

gulp-changedはもう不要です。

インストール

gulp-watch、gulp-changed、gulp-sourcemapsは無くても大丈夫そうなので、以下のものを利用することにしました。

gulpfile.js

実際にGulp4で書いたタスクがこちら。

Gulp3よりもシンプルで分かりやすくなったかな・・・?

最後に

自分が普段使っているパッケージで試した感じでは今のところGulp4でも大きな問題は無さそうなので一安心。

次はいつ変わることやら・・・

ページの先頭に戻る