Blogブログ

gulp version3→4

gulpでv3からv4にバージョンアップし、gulpを起動するまでの流れです。

▼gulp v3を削除し、v4をインストールする

インストールされているgulp v3を削除してgulp v4をインストールします。
私はバージョン指定で4.0.2を選択しています。

npm uninstall --save-dev gulp
npm i --save-dev gulp@4.0.2

▼このままgulpを起動するとエラーがでる

インストールできて起動してみると↓のような結果に。

$ gulp
assert.js:350
    throw err;
    ^

AssertionError [ERR_ASSERTION]: Task function must be specified
    at Gulp.set [as _setTask] (C:\Users\自分のディレクトリ\html\node_modules\undertaker\lib\set-task.js:10:3)
    at Gulp.task (C:\Users\自分のディレクトリ\html\node_modules\undertaker\lib\task.js:13:8)
    at Object. (C:\Users\自分のディレクトリ\html\gulpfile.js:136:8)
    at Object. (C:\Users\自分のディレクトリ\html\gulpfile.js:138:4)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)

いきなり壁が立ちはだかります。何がなんだかよくわかりません。

▼エラー文を検索してみた

"AssertionError [ERR_ASSERTION]"をキーワードにして検索しました。

たくさん検索結果出ましたね。
私が修正で必要な箇所は以下でした。

• gulp.taskの引数の変更
• gulp.watchの引数の変更

記述方法が違ってたようです。まぁわかるわけない。

▼gulp.watchの引数の変更

gulpfileがcoffee scriptで記述されてることでcoffee scriptのgulpfileをコンパイルしてgulpfile.jsを出力しなければならず。
gulpfile.jsとgulpfile.coffeeそれぞれの書き方が下記のようになりました。

[gulpfile.js]

修正前 v3

gulp.watch('src/ejs/**/*.ejs', ['ejs']);

修正後 v4

gulp.watch('src/ejs/**/*.ejs', gulp.task('ejs'));

[gulpfile.cofee]

修正前 v3

gulp.watch 'src/ejs/**/*.ejs', ['ejs']

修正後 v4

gulp.watch 'src/ejs/**/*.ejs', gulp.task('ejs')

coffee scriptの場合、gulp.watchの後に括弧いらないみたいですけど、なんか不安というか馴染めないです。

▼gulp.taskの引数の変更

taskの箇所の修正点は以下になります。

[gulpfile.js]

修正前 v3

gulp.task('default', ['watch', 'browserSync']);

修正前 v4

gulp.task('default', gulp.series(gulp.parallel('watch', 'browserSync')));

[gulpfile.cofee]

修正後 v3

gulp.task 'default', ['watch','browserSync']

修正後 v4

gulp.task 'default', gulp.series(gulp.parallel('watch', 'browserSync'))

他の解説サイトで検索しましたところ、seriesが直列処理で、parallelが並列処理となっているようです。
以下、引用になります。

直列処理はタスクを1つずつ順番に処理していくので、順番を明確にしたい時に使用します。逆にparallelは並列処理で、タスクを同時に処理していきます。

記述の修正後、gulp v4を起動することができました。
v3からv4にあげたことでどのような利点があるか実感できておりませんが。
以上、バージョンアップからの導入までの流れでした。