DaraW

Code is Poetry

gulp构建中del的一个小坑

前言

grunt,gulp以及webpack三个常见构建工具的对比和介绍已经很多了,这里就不再赘述。手上这个项目用了gulp进行构建,同时也是我刚刚入门学习使用gulp构建。

问题

在写gulpfile.js的task时,一开始我是这么写的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
gulp.task('clean', function(cb) {

del(['typing.min.js'], cb);

});

gulp.task('build', ['clean'], function() {

gulp.src('typing.js')
.pipe(uglify())
.pipe(rename('typing.min.js'))
.pipe(gulp.dest(''));

});

gulp.task('default', ['clean', 'build']);

shell里执行

1
gulp

或者是

1
gulp build

始终只进行了clean任务而不build,对着API和一些介绍gulp的文章,怎么都找不到问题所在。

解决

接着搜到了一句话:

Make sure to return the stream so that gulp knows the clean task is asynchronous and waits for it to terminate before starting the dependent one.

由于del是异步执行的,尝试在clean任务中返回流后就正常了:

1
2
3
4
5
gulp.task('clean', function(cb) {

return del(['typing.min.js'], cb);

});

另外在github的del项目的issues中看到一个哥们提供的解决方案,其中一个是返回流,另一个则是常见的解决方案:回调。

构建的其他方案

在学长ChiChou的技术群里,学长告诉我在这种无需大量文件操作的项目中,可以用package.json+Makefile进行构建,甚至可以连这都不用,直接在package.json中的scripts中写入指令,然后npm run xxxx执行。

Proudly powered by Hexo and Theme by Hacker
© 2019 DaraW