Gulp4 入門サンプルソースコード

Gulpの使い方がよくわからない私のような人にサンプルソースコードを提供します。

Install

$ yarn add -D glup
$ npx gulp -v

Gulp3から4になったせいで...

若干書き方が変わり、ドットインストールのGulp入門などの書き方ではできなくなってきています。

具体的に変わった場所は、
gulp3は非常にシンプルで[]配列のような指定でよかった場所も4ではgulp.seriesの関数が必要となりました。

また、順次処理を行うには引数にdoneとdone()が必要で
並列処理を行うにはgulp.parallelが必要となりました。

サンプルソースコード

const gulp = require('gulp');

// htmlファイルのコピー
gulp.task('html', (done) => {
    gulp.src('./src/*.html')
    .pipe(gulp.dest('./dist'));
    done()
});
// 1秒スリープ
gulp.task('sleep', (done) => {
    setTimeout(() => {
        console.log('sleep 1000ms');
        done()
      }, 1000);
});
// ENDメッセージ
gulp.task('msg', (done) => {
    console.log('Gulp END!');
    done()
});

gulp.task('default',
    gulp.series( 
        // 順次実行
        // 'html', 'sleep', 'msg'
        // 並列実行
        gulp.parallel('html', 'sleep', 'msg'),
    )
);