gulp-useref不适用于gulp-merge

时间:2017-12-13 15:18:09

标签: gulp gulp-useref gulp-merge

情况:我有以下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)没有在promise中返回一个有效的结尾。 (依赖问题)

如果我删除了其中一个任务,则另一个任务正确完成。

我做了以下测试:

无法正常工作(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);
});

1 个答案:

答案 0 :(得分:2)

您使用的是gulp-cached吗?

是否可以在缓存中找到s2中的资源?因此,.pipe(cache('useref'))不会向前传递文件,而s2将是null

使用gulp-cached,如果在缓存中找到资源,则不会传递缓存的资源。它没有任何通过,即它停止。因此s2将为空。

我会尝试删除.pipe(cache('useref'))并查看它是否有效?