通过插件让gulp同步执行任务列表

作者：管理员 2019-05-06 11:51:42 分类：别出心裁-妙阅读（3798） 0

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

gulpV3版本

安装插件

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

gulpV4版本

在版本4中，gulp创建任务应该是个函数，不推荐使用task方式，官方明确强调gulp不再支持同步任务，但官方提供了任务（task）完成通知功能，例如：

版本说明

1
2
3

// gulp -v命令应该对应以下版本，否则部分功能不兼容
CLI version: 2.3.0
Local version: 4.0.2

使用 callback

如果任务（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;

返回stream

在实际使用过程中推荐该方式，通过上面方式并没有达到我的预期效果，任务没有完全同步

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');
});

注意任务名不再是之前的字符串，而是函数名

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com

赞(0) 打赏

标签：

gulp 打包

上一篇：初窥Flutter世界，新一代跨平台移动UI框架

下一篇：利用css3 flex布局超简单快速实现瀑布流排版