【发布时间】:2017-12-13 15:18:09
【问题描述】:
情况:我有以下 Gulp 脚本,它应该将我的所有 html 文件构建到 distFolder。此外,它应该通过解析 index.html 中的链接来构建外部脚本文件——这是 useref 的优点。 我不确定这是否是理想的方法 - 但我需要拆分 html 文件 - 如果我放入多个 html 文件,我会遇到与 cleanCSS() 和 uglify() 的写入冲突。
// Parse the html file and create external scripts
gulp.task('htmlscripts', function() {
var s1 = gulp.src(['*.html', '!index.html'])
.pipe(useref({noAssets: true}))
.pipe(gulp.dest(distFolder));
var s2 = gulp.src('index.html')
.pipe(useref())
.pipe(cache('useref'))
.pipe(gulpif('*.js', uglify()))
.pipe(gulpif('*.css', cleanCSS()))
.pipe(gulp.dest(distFolder));
return merge(s1, s2);
});
// Minify
gulp.task('htmlmin', ['htmlscripts'], function() {
return ...
});
gulp.task('default', ['htmlscripts', 'htmlmin']);
问题:第二个任务 (htmlmin) 从未加载。看来,第一个任务(htmlscripts)没有在承诺中返回有效的结尾。 (依赖问题)
如果我删除了这两项任务中的一项,另一项将正确完成。
我做了以下测试:
不工作(htmlmin 任务未启动):
gulp.task('htmlscripts', function() {
var s1 = gulp....
var s2 = gulp....
return merge(s1,s2);
});
工作中(我的意思是至少运行了 htmlmin 脚本):
gulp.task('htmlscripts', function() {
var s1 = gulp....
var s2 = gulp....
return merge(s1);
});
不工作(htmlmin 任务未启动):
gulp.task('htmlscripts', function() {
var s1 = gulp....
var s2 = gulp....
return merge(s2); // this one is really strange, isn't it? (see next test)
});
工作中(我的意思是至少运行了 htmlmin 脚本):
gulp.task('htmlscripts', function() {
// var s1 = gulp....
var s2 = gulp....
return merge(s2);
});
【问题讨论】:
-
你为什么将
htmlscripts作为htmlmin和default任务的依赖项?这不会造成问题吗?对htmlmin的依赖就足够了。 -
@lofihelsinki:你的意思是在最后一行?这是我的开始任务(当我运行 >gulp 时)。我想我必须在这里列出我所有的任务,不是吗?
-
不,如果
htmlscripts已经是htmlmin中的依赖项,则每次运行htmlmin时都会运行它。因此,您应该将其从default任务中删除。 -
好的,所以当我使用 gulp 时,我只启动最后一个任务,并且每个任务都有前一个任务作为依赖项?我从来没有读过... - 我会尝试!
-
您也可以将
htmlmin的依赖关系放在一起,只将htmlscripts和htmlmin作为default任务的依赖关系。但是没有理由在两个地方有htmlscripts。
标签: gulp gulp-useref gulp-merge