這裡要來先補充一下

確認任務的流程(3種)

1. 加入 return (上篇有提到過)

gulp.task('imageMin', function() {
  return gulp
    .src('./source/images/*')
    // ...
});

2. 加入 callback function

gulp.task('imageMin', function(done) {
  gulp
    .src('./source/images/*')
    // ...
  done(); // 在函式參數傳入一個 callback function，並在最後方調用
});

3. 轉為 async function

gulp.task('imageMin', async function() {
  gulp
    .src('./source/images/*')
    // ...
});

目前我們尚未加入 watch 與 browser-sync

這裡我們開始撰寫 default (跟build很像)
我們用一個 callback function
來達成非同步
並把 watch 與 browser-sync 的內容貼近去

不過這裡要注意
watch 後面 要改成 gulp.series('...')

gulp.task('default',
    gulp.series(
        'clean',
        'bower',
        'vendorJS',
        gulp.parallel('jade','sass','babel','image-min'),
        function(done) {
            browserSync.init({
                server: {
                    baseDir: "./public",
                    reloadDebounce: 2000
                }
            });
            gulp.watch('./source/stylesheets/**/*.scss', gulp.series('sass'));
            gulp.watch('./source/**/*.jade', gulp.series('jade'));
            gulp.watch('./source/js/**/*.js',gulp.series('babel'));
            done();
        }
    )
)

那今天的介紹就到這裡
若有任何問題 或 內容有誤
都可以跟我說唷