对于GULP 3，我使用run-sequence包来帮助按顺序而不是并行运行任务。这是我配置watch任务的方式，例如：

var gulp = require('gulp'),
    runSequence = require('run-sequence');

gulp.task('watch', function() {
    gulp.watch('templates/**/*.html', function(){ runSequence('templates', 'bundleJS') });
});

上面的例子显示了一个典型的watch任务，它将gulp.watch方法与文件挂钩，当文件发生变化时，gulp.watch方法将被监听，并且当检测到变化时，runSequence函数将被调用（在某个watch的回调中），其中包含一系列以同步方式运行的任务，这与默认的并行运行任务的方式不同。

Gulp会在“同一时间”启动所有任务，除非您声明了依赖关系（或者使流通过管道相互连接）。
例如，如果您希望任务app_build_css等待任务app_scss和app_vendor_css完成，则声明依赖关系，

gulp.task('app_scss', function(){
    return gulp.src(appScssDir + '/main.scss')
        .pipe(sass({ style: 'compressed' }).on('error', gutil.log))
        .pipe(autoprefix('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest(appBuilderDir));
});

gulp.task('app_vendor_css', function(){
    return gulp.src(appProviderCssDir + '/*.css')
        .pipe(minifyCSS({ keepSpecialComments: 0 }))
        .pipe(concat('app_vendor.css'))
        .pipe(gulp.dest(appBuilderDir));

});

gulp.task('app_build_css', ['app_scss', 'app_vendor_css'], function(){
    return gulp.src(appBuilderDir + '/*.css')
        .pipe(concat('style.css'))
        .pipe(gulp.dest(targetCssDir));
});

gulp.task('watch', function () {
    gulp.watch(appScssDir + '/**/*.scss', ['app_build_css']);
});

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

检查Gulp.task（）文档

gulp v4

现在Gulp v4已经发布了将近一年多（2017年底发布），它提供了一些很好的方法来使用他们的库巴赫排序任务。
https://github.com/gulpjs/bach

注意：我建议迁移到Gulp v4，因为v3有一些安全漏洞[我不确定这些漏洞现在是否已经修补]。

快速示例

Gulp v4引入了gulp.series和gulp.parallel，这允许您创建任务并选择以串行、并行或混合方式运行，如下所示。

说明：这将 * 并行 * 运行scss和js任务，一旦这些任务完成，它将运行watch任务，因为它们是 * 串行 * 的。

const defaultTasks = gulp.series(
  gulp.parallel(scss, js),
  watch
);
defaultTasks.description = 'Builds scss, and js, then watches them for changes and rebuilds upon change.';

module.exports = {
  default: defaultTasks,
  scss,
  js
}

扩展示例

下面是一个简化的例子，说明我的gulp文件可能是什么样子的。

const gulpScss = require('gulp-sass');
const gulpBabel = require('gulp-babel');

const paths = {
  scss: [
    'public/stylesheets/*.scss'
  ],
  js: [
    'public/js/*.js'
  ]
};

const scss = () => {
  return gulp.src(paths.scss)
    .pipe(gulpScss)
    .pipe(gulp.dest('dist'));
}
scss.description = 'Transpiles scss files to css.';

const js = () => {
  return gulp.src(paths.js)
    .pipe(gulpBabel({
      presets: ['@babel/env']
    }))
    .pipe(gulp.dest('dist'));
}
js.description = 'Transpiles JS with babel';

const watch = () => {
  gulp.watch(paths.scss, scss);
  gulp.watch(paths.js, js);
}
watch.description = 'Watches for changes to files and runs their associated builds.';

const defaultTasks = gulp.series(
  gulp.parallel(scss, js),
  watch
);
defaultTasks.description = 'Builds scss, and js, then watches them for changes and rebuilds upon change.';

module.exports = {
  default: defaultTasks,
  scss,
  js
}

我发现使用以下语法定义“系列”任务很有用

gulp.task('jsLib', gulp.series(
    function copiaLibJs () {
        return gulp
            .src(paths.lib.files)
            .pipe(rename(function(path) {
                path.dirname = path.dirname.replace(/\/dist/, '').replace(/\\dist/, '');
            }))
            .pipe(gulp.dest(paths.lib.dest));
    },
    function fontAwesomeCss(){
        return gulp.src('node_modules/font-awesome/css/**').pipe(gulp.dest(paths.css.dest));
    },
    function fontAwesomeFonts(){
        return gulp.src('node_modules/font-awesome/fonts/**').pipe(gulp.dest(paths.font.dest));
    }

));