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

在使用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 = requireyargs.argv, gulp = requiregulp, less = requiregulp-less, uglify = requiregulp-uglify, concat = requiregulp-concat, rename = requiregulp-rename, plumber = requiregulp-plumber, header = requiregulp-header, revAppend = requiregulp-rev-append, clean = requiregulp-clean, notify = requiregulp-notify, minifycss = requiregulp-minify-css, autoprefixer = requiregulp-autoprefixer, Browsersync = requirebrowser-sync.create; var pkg = require./package.json;
var banner = [/**, * <%= pkg.name %>, * @Version: v<%= pkg.version %>, * @Author : ray0324, * @QQ : 545886131, * @E-mail : ray0324@foxmail.com, *, */, ].join
; /*删除旧的css文件件*/
gulp.taskclean-css, function { return gulp .src[dist/css/**/*.css], {read: false} .pipeclean;
}; /*删除旧的js文件件*/
gulp.taskclean-js, function { return gulp .src[dist/js/**/*], {read: false} .pipeclean;
}; /* 构建less */
gulp.taskbuild-less,[clean-css], function { return gulp .src[less/admin.less] .pipeplumber{errorHandler: notify.onErrorError: <%= error.message %>} .pipeless .pipeautoprefixer{browsers: [last 2 versions],cascade: false} .pipeheaderbanner, {pkg : pkg } .pipegulp.destdist/css/;
}; /* 构建js */
gulp.taskbuild-js,[clean-js],function{ return gulp .src[src/**/*.js] .pipegulp.destdist/js/
} /* 移动文件 */
gulp.tasksource,function{ return gulp .srcres/img/**/* .pipegulp.destdist/img/;
} gulp.taskcopy-html,function { return gulp .srctpl/**/*.html .pipegulp.destdist/; }; /* 更新文件版本 添加MD5 */
gulp.taskrev-html,[copy-html],function { return gulp .srcdist/**/*.html .piperevAppend .pipegulp.destdist/;
}; /* 启动一个服务器 */
gulp.taskserve, function { Browsersync.init{ open: external, //用局域网ip打开 server: { baseDir: "./dist", directory: true } };
}; /* 监控文件变化 */
gulp.taskwatch, function { gulp.watch./less/*.less, [build-less,rev-html]; gulp.watch./tpl/**/*.html,[rev-html]; gulp.watch./src/**/*.js,[build-js,rev-html];
}; gulp.taskdefault, function { gulp.startserve; gulp.startwatch; // if yargs.s { // gulp.startserve; // } // if yargs.w { // gulp.startwatch; // }
};

发表评论

电子邮件地址不会被公开。 必填项已用*标注