フロントエンド

Gulp4へバージョンアップした際の変更点

Gulp3との違い

taskの記法

Gulp3まではtask()メソッドを使うことが多かったですが、Gulp4では非推奨となり関数宣言とexportsが推奨となりました。

Gulp3までは頻繁に使用していたgulp.task()関数が非推奨となり、関数宣言とexportsが推奨となりました。
記述方法は下記のように変わります。

今まで記法(Gulp3)

gulp.task('task', function() {
  ...
});
gulp.task('task2', function() {
  ...
});

これから推奨される記法(Gulp4)

function task() {
  ...
}
  exports.task = task;

watchの記法

gulp.watch()の第二引数が配列から関数名を渡すようになりました。

今まで記法(Gulp3)

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

これから推奨される記法(Gulp4)

gulp.watch('', task);

公式APIで直列処理・並列処理が可能になりました

直列・並列処理はrun-sequenceをインストールしていましたが、直列をseries()で、並列をparallel()で実行できるようになりました。

今まで記法(Gulp3)

const runSequence = require('run-sequence');
gulp.task('default', function() {
  runSequence(
    ['pug', 'sass', 'js'],
    'server'
  );
});

これから推奨される記法(Gulp4)

exports.default = gulp.series(
    gulp.parallel(pug, sass, js),
    server
);

-フロントエンド
-,