普段使っているテンプレート、ちょいちょい更新しているんですけど古くなっている感が増していたのでそろそろ見直そうかと。
Gulpをバージョン4に更新しました、それに伴いgulpfileを記述し直したのと4にしたことで記法が少し変わったのでそのあたりを。
Gulp4のインストール
npm i gulp@next -D@nextが付いてないと現状（2018/8/31）だと3系がインストールされます。
続いてgulpfileをES2015で書く都合でbabelでトランスパイルするため.babelrcを作成。
{
"presets": [
["env", {
"targets": {
"browsers": ["last 2 versions"]
}
}]
]
}babel-core, babel-preset-envもインストールしておきましょう。
npm i babel-core babel-preset-env -D最後にgulpfile.jsをgulp.babel.jsに変更します。（忘れてて全然動かなかった・・・）
gulpfileの書き換え
task()やwatchの引数が変わっていたのとseries()とparallel()が追加になりました。seriesが直列、parallelが並列処理です。
task()
gulp 3.x
gulp.task('images', function(){
return gulp.src(dir.src.images + '**/*')
//処理
});gulp4
export const images = () => {
return gulp.src(dir.src.images + '**/*')
//処理
}watch()
gulp 3.x
gulp.task('watch' ,function() {
gulp.watch(dir.src.images + '**/*', ['images']);
}gulp 4
export const watch = () => {
gulp.watch(dir.src.images + '**/*', gulp.series(images));
}Default
gulp 3.x
gulp.task('default', ['run', 'watch']);gulp 4
export default gulp.series(run, watch);結果こんな感じになりました、普段コーポレートサイト等を作るときに使ってるSass、Webpack、Nunjucks、Iconfontの変換、画像の圧縮とbrowsersyncでサーバー立ててます。一式Githubにあげてるので詳しくはそちらをどうぞ
参考