使用过gulp工具的应该都知道,gulp默认是异步执行任务的,这样可以大大提高运行速度效率,但实际情况我们很多时候需要用到同步,举个场景例子,我现在需要将一个css文件不压缩,一个css文件压缩,然后我将这两个文件去合并,你不用猜疑这个想法很奇怪,存在必有意义。如果你无法接受?那好,我再举个例子,因为在某些情况下,在src开发环境删除一个文件是不会删掉dist文件夹对应的文件的,gulp采用的是覆盖形式,我希望每次压缩打包之前先清空之前的dist生产环境文件夹,然后当清空完毕再执行打包,如何实现?
1 | npm install run-sequence -D |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | const gulp = require('gulp'); const clean = require('gulp-clean');//清空目录下资源 const runSequence = require('run-sequence'); //流程控制,控制任务执行顺序 //清空dist目录 gulp.task("clean", function () { console.log('清空dist目录下的资源') return gulp.src('dist', { read: false }) .pipe(clean({ force: true })); }) // 拷贝文件 gulp.task("copyHtml", function () { //pipe后面对应的地址就是将前面路径文件拷贝复制到哪里去 console.log('\n正在打包编译中,请稍后......................\n'); return gulp.src(["src/**", "!src/*.html", "!src/*.css", "!src/js/*", "!src/css/*"]).pipe(gulp.dest('dist')) }); gulp.task('default',function(){ //重点来了,通过runSequence咱们把要执行的任务列表包裹起来就OK,并且还自带回调函数,棒棒的 runSequence("clean", "copyHtml", "Watch",function(){ console.log('\n恭喜你,编译打包已完成,所有文件在dist文件夹!!!'); }) }); |
在版本4中,gulp创建任务应该是个函数,不推荐使用task方式,官方明确强调gulp不再支持同步任务,但官方提供了任务(task)完成通知功能,例如:
1 2 3 | // gulp -v命令应该对应以下版本,否则部分功能不兼容 CLI version: 2.3.0 Local version: 4.0.2 |
如果任务(task)不返回任何内容,则必须使用 callback 来指示任务已完成。在如下示例中,callback 将作为唯一一个名为 cb() 的参数传递给你的任务(task)。
1 2 3 4 5 6 | function callbackTask(cb) { // `cb()` should be called by some async work cb(); } exports.default = callbackTask; |
在实际使用过程中推荐该方式,通过上面方式并没有达到我的预期效果,任务没有完全同步
1 2 3 4 5 6 7 8 | const { src, dest } = require('gulp'); function streamTask() { return src('*.js') .pipe(dest('output')); } exports.default = streamTask; |
1 2 3 | exports.default = gulp.series(clearFile, copyHtml, miniHtml, minCss, mergeCss, jsCopy, jsConcat, compressZip, Watch, function () { console.log('\n恭喜您打包成功,文件存放目录' + target + '\n'); }); |
注意任务名不再是之前的字符串,而是函数名
支付宝扫一扫打赏
微信扫一扫打赏
共 0 条评论关于"通过插件让gulp同步执行任务列表"
最新评论