node.js - Gulp task执行的先后依赖以及先后顺序问题以及browsersync刷新

Question

在使用Gulp处理工作流的时候遇到了执行流程顺序的问题

我的项目结构是这样的

我想执行的工作流程是

1.监控tpl中html文件变化-->复制tpl中的html文件到dist目录下-->刷新html文件版本号-->刷新浏览器
2.监控less文件的变化-->清空dist/css目录下的所有css文件-->编译less-->刷新html文件版本号-->刷新浏览器
3.监控js的变化-->清空dist/js目录下的js文件-->复制src/目录下的js到dist/js下-->刷新html文件版本号-->刷新浏览器
4.监控res/目录下静态资源的变化-->复制res/img目录下的文件到dist/img目录下--刷新浏览器

其中1,2,3,4步骤没有先后顺序。但是每一条监控任务内部是要按照先后顺序执行的

• 执行第2个任务的时候 必须是先清空文件 再编译less 最后刷新浏览器 如何控制这步骤的先后问题？

• 还有一个问题就是 我写的browsersync刷新 是想在所有的编译工作完成后刷新 我期望是复制n个文件 完成后刷新1次 但是现在是复制n个文件完成后刷新了n次，这个问题如何解决？

最后附上我的gulpfile.js文件

var yargs        = require('yargs').argv,
        gulp         = require('gulp'),
        less         = require('gulp-less'),
        uglify       = require('gulp-uglify'),
        concat       = require('gulp-concat'),
        rename       = require('gulp-rename'),
        plumber      = require('gulp-plumber'),
        header       = require('gulp-header'),
        revAppend    = require('gulp-rev-append'),
        clean        = require('gulp-clean'),
        notify       = require('gulp-notify'),
        minifycss    = require('gulp-minify-css'),
        autoprefixer = require('gulp-autoprefixer'),
        Browsersync  = require('browser-sync').create();

var pkg          = require('./package.json');
var banner       = ['/**',
                                        ' * <%= pkg.name %>',
                                        ' * @Version: v<%= pkg.version %>',
                                        ' * @Author : ray0324',
                                        ' * @QQ     : 545886131',
                                        ' * @E-mail : ray0324@foxmail.com',
                                        ' *',
                                        ' */',
                                        '\n'].join('\n');


/*删除旧的css文件件*/
gulp.task('clean-css', function () {
        return gulp
                        .src(['dist/css/**/*.css'], {read: false})
                        .pipe(clean());
});

/*删除旧的js文件件*/
gulp.task('clean-js', function () {
        return gulp
                        .src(['dist/js/**/*'], {read: false})
                        .pipe(clean());
});

/* 构建less */
gulp.task('build-less',['clean-css'], function() {
        return gulp
                        .src(['less/admin.less'])
                        .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
                        .pipe(less())
                        .pipe(autoprefixer({browsers: ['last 2 versions'],cascade: false}))
                        .pipe(header(banner, {pkg : pkg }))
                        .pipe(gulp.dest('dist/css/'));
});


/* 构建js */
gulp.task('build-js',['clean-js'],function(){
        return gulp
                        .src(['src/**/*.js'])
                        .pipe(gulp.dest('dist/js/'))
})


/* 移动文件 */
gulp.task('source',function(){
        return gulp
                        .src('res/img/**/*')
                        .pipe(gulp.dest('dist/img/'));
})


gulp.task('copy-html',function() {
        return gulp
                        .src('tpl/**/*.html')                                     
                        .pipe(gulp.dest('dist/'));

});

/* 更新文件版本 添加MD5 */
gulp.task('rev-html',['copy-html'],function() {
        return gulp
                        .src('dist/**/*.html')
                        .pipe(revAppend())                                       
                        .pipe(gulp.dest('dist/'));
});


/* 启动一个服务器 */
gulp.task('serve', function() {
        Browsersync.init({
                open: 'external',  //用局域网ip打开
                server: {
                        baseDir: "./dist",
                        directory: true
                }
        });
});


/* 监控文件变化 */
gulp.task('watch', function () {
        gulp.watch('./less/*.less', ['build-less','rev-html']);
        gulp.watch('./tpl/**/*.html',['rev-html']);
        gulp.watch('./src/**/*.js',['build-js','rev-html']);
});



gulp.task('default', function () {

    gulp.start('serve');
    gulp.start('watch');
        // if (yargs.s) {
        //         gulp.start('serve');
        // }

        // if (yargs.w) {
        //         gulp.start('watch');
        // }
});