OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

Gulp v3系からGulp v4系への移行と注意点いろいろ

最終更新日:2020.4.9 Update!!
コーディング時に欠かせないGulpですが、かなり前にメジャーアップデートが行われたのですが、案件に追われてなかなかアップデートできずにいました、、今更ではありますが、バージョン4系にアップデートしましたので、その時の流れといろんな注意点をメモしておきたいと思います。  
Gulp v3系からGulp v4系へアップデート
Gulpですがグローバルへのインストールとローカルでプロジェクト単位でのインストールがありますが、基本的にローカルのインストールだけでOKです。すでにPC内にはGulp v3系が入っている状態ですが、一応、使う可能性があれば残しておいてもいいのではないでしょうか。   今回は新たにGulp v4系をインストールするので、Gulp v3系とは別のプロジェクトフォルダを用意します。まずはpackage.jsonの作成を行います。コマンドでプロジェクトフォルダまで移動して、下記のコマンドで作成します。
$ cd プロジェクトディレクトリ
$ npm init -y
  続けて、ローカルへGulpをインストールしていきます。通常のインストール方法であればもう4系が自動的にインストールされるようですね。
$ npm install --save-dev gulp

+ gulp@4.0.0
added 386 packages from 239 contributors in 11.559s
[+] no known vulnerabilities found [6376 packages audited]
  万が一、3系がインストールされる場合は下記のコマンドでインストールを試してみてはいかがでしょうか。
// v.3.9がインストールされる場合
$ npm install --save-dev gulp@next
  インストールが完了し、バージョンが4系になっているのが確認できますね。この時のコマンドですが最初に「npx」と付けることでローカルのnode_modulesを参照するようになるので、グローバルにインストールしていなくてもgulpのコマンドが実行できるようになります。
$ npx gulp -v
[00:00:00] Local version 4.0.0
  これで無事に3系から4系へのGulpのアップデートが完了しました。基本的な使い方はほとんど同じでこれまで通り使えるようになっているのですが、一部アップデートに伴い変更点があるようで、3系で使っていたgulpfile.jsをそのまま使うとエラーが出てしまいます。エラーごとの対処法と合わせて、4系での変更点を見ていきます。  
Gulp v4系でのエラーメッセージと対処法
まず、タスクを実行すると下記のようなエラーメッセージが返ってくることがあります。これはタスクの処理が終わっていないことを示すもので、4系からはタスクへの関数にいくつかの制約ができたみたいです。
[00:00:00] The following tasks did not complete: TASK_NAME
[00:00:00] Did you forget to signal async completion?
  この対処法としては下記のようにreturnを追加することで対応するほか、引数からコールバックを実行することでも対処できるようです。
gulp.task('sass', function () {
  return gulp.src('src/scss/**/*.scss') // returnを追加する
  .pipe(sass())
  .pipe(gulp.dest('./dist/assets/css'))
});

gulp.task('html', function (done) {
  browser.reload();
  done(); // コールバック関数を追加する
});
  また、上記以外にも下記のようなエラーメッセージが出ることもあります。特に監視系のタスクを実行した時に見かけるのではないでしょうか。
AssertionError [ERR_ASSERTION]: Task function must be specified
  ここでも、v3系とv4系の書き方が変更されたことによる影響が出ています。具体的には、gulp.task()関数の引数が変わったことです。コードを下記のように変更することで対応できます。並列で複数タスクを処理する場合には少し異なりますので注意が必要です。
// Gulp v3系の記述
gulp.task('task_1', ['task_2'], function() {
});

// Gulp v4系の記述
gulp.task('task_1', gulp.series( 'task_2', function() {
});

// Gulp v4系で複数のタスクを並列で処理させる場合
gulp.task('task_1', gulp.series( gulp.parallel( 'task_2', 'task_3' ), function() {
}));
  また、gulp.watch()関数も若干書き方が変更されており、これまではタスク名を引数に入れていましたが、gulp.task()関数で直接タスクを呼び出す必要があります。
// Gulp v3系の記述
gulp.watch('src/scss/**/*.scss', ['sass']);

// Gulp v4系の記述
gulp.watch('src/scss/**/*.scss', gulp.task('sass'));
  また、Gulpの4系では「gulp.task()」が非推奨となっています。それに伴いタスクの登録は関数として定義した上で、exportsで実行するという形になります。
const taskSass = () => 
 src('src/scss/**/*.scss') 
  .pipe(sass())
  .pipe(gulp.dest('./dist/assets/css'))

exports.sass = taskSass
  これで、下記のコマンドを実行すると登録したタスクが走るようになります。
$ npx gulp sass
  これまでと若干の変更が加えられているので、タスク実行時にエラーが出る場合が多くなってしまうのですが、一つずつ確認すれば、そこまで注意しておく場所も少ないかと思います。これで気にすることなく4系へ移行ができますね。   (参考にさせて頂いたサイト) gulp v4.0.0がプレリリース! 移行方法と変更点まとめ リリース間近??より便利になったgulp 4.0の変更点と移行へのポイントを紹介します!
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

COMMENTS

  • gulp

    2020.8.27
    うまくいかずにこちらの記事にたどり着きました。 お忙しいところ恐縮ですがアドバイスをいただければ幸いです。 新しいPCにgulpをインストールしたら下記のようにエラーが出ます。 gulp watch ReferenceError: primordials is not defined at evalmachine.:40:5 at Object. (C:\Users\h\Desktop\images\gulp-folder\website\japanese-food\EC\node_modules\vinyl-fs\node_modules\graceful-fs\fs.js:11:1) at Module._compile (internal/modules/cjs/loader.js:1251:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1272:10) at Module.load (internal/modules/cjs/loader.js:1100:32) at Function.Module._load (internal/modules/cjs/loader.js:962:14) at Module.require (internal/modules/cjs/loader.js:1140:19) at require (internal/modules/cjs/helpers.js:75:18) at Object. (C:\Users\h\Desktop\images\gulp-folder\website\japanese-food\EC\node_modules\vinyl-fs\node_modules\graceful-fs\graceful-fs.js:3:27) at Module._compile (internal/modules/cjs/loader.js:1251:30) 調べたところgulpのバージョンが古いのにnodejsのバージョンが新しいからと出てきました。 その後gulpをアップグレードしたところ今度は下記のようになりました。 C:\Users\h\Desktop\images\gulp-folder\website\japanese-food\和風のECサイト>gulp watch AssertionError [ERR_ASSERTION]: Task function must be specified at Gulp.set [as _setTask] (C:\Users\h\Desktop\images\gulp-folder\website\japanese-food\和風のECサイト\node_modules\undertaker\lib\set-task.js:10:3) at Gulp.task (C:\Users\h\Desktop\images\gulp-folder\website\japanese-food\和風のECサイト\node_modules\undertaker\lib\task.js:13:8) at Object. (C:\Users\h\Desktop\images\gulp-folder\website\japanese-food\和風のECサイト\gulpfile.js:120:6) at Module._compile (internal/modules/cjs/loader.js:1251:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1272:10) at Module.load (internal/modules/cjs/loader.js:1100:32) at Function.Module._load (internal/modules/cjs/loader.js:962:14) at Module.require (internal/modules/cjs/loader.js:1140:19) at require (internal/modules/cjs/helpers.js:75:18) at requireOrImport (C:\Users\h\AppData\Roaming\npm\node_modules\gulp\node_modules\gulp-cli\lib\shared\require-or-import.js:19:11) { generatedMessage: false, code: 'ERR_ASSERTION', actual: false, expected: true, operator: '==' } 下記のように引数にある配列をすべて変更しないといけないのでしょうか? gulp.task('default',['choose','css','scripts']); Change that to: gulp.task('default',gulp.series('choose','css','scripts')); https://stackoverflow.com/questions/58709290/gulp-task-not-being-detected-when-open-the-project-in-vs-code より 引数にある配列をすべてgulp.series()に変更しないといけなくなったのでしょうか? 引数に関数を書くという特殊な書き方をしないといけないのですか? 他にもgulpが十個あるのですべて変換するのはあまりに大変です。 よろしくお願いいたします。

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram