唯品秀前端博客
立即登录 马上注册

使用过gulp工具的应该都知道,gulp默认是异步执行任务的,这样可以大大提高运行速度效率,但实际情况我们很多时候需要用到同步,举个场景例子,我现在需要将一个css文件不压缩,一个css文件压缩,然后我将这两个文件去合并,你不用猜疑这个想法很奇怪,存在必有意义。如果你无法接受?那好,我再举个例子,因为在某些情况下,在src开发环境删除一个文件是不会删掉dist文件夹对应的文件的,gulp采用的是覆盖形式,我希望每次压缩打包之前先清空之前的dist生产环境文件夹,然后当清空完毕再执行打包,如何实现?

利用国内的gulp-sequence或国外 run-sequence

在此通过run-sequence举例

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文件夹!!!');
    })
});

小结

通过run-sequence插件我们很容易就完成我们想要结果,这个插件用法是不是超级简单呢

本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(0) 打赏
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"通过插件让gulp同步执行任务列表"

表情

最新评论

    暂无留言哦~~