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

Gulp 2018.12.30

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

Tags: ,,,
最終更新日: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の変更点と移行へのポイントを紹介します!

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

1件のコメント

  • うまくいかずにこちらの記事にたどり着きました。
    お忙しいところ恐縮ですがアドバイスをいただければ幸いです。

    新しい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が十個あるのですべて変換するのはあまりに大変です。

    よろしくお願いいたします。

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?