0%

Programmingプログラミングナレッジ

Posted:2018.12.30

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

コーディング時に欠かせない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'));

 

これまでと若干の変更が加えられているので、タスク実行時にエラーが出る場合が多くなってしまうのですが、一つずつ確認すれば、そこまで注意しておく場所も少ないかと思います。これで気にすることなく4系へ移行ができますね。

 

(参考にさせて頂いたサイト)
gulp v4.0.0がプレリリース! 移行方法と変更点まとめ
リリース間近??より便利になったgulp 4.0の変更点と移行へのポイントを紹介します!

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】