javascript – 使用useref重命名index.html文件的gulp-rev

2023年1月26日 190次阅读

我是新手使用gulp并且我正在尝试为我的项目创建一个gulpfile.

我的第一个任务是组合index.html中存在的所有脚本和链接标记,并用仅一个标记替换它们.为了达到这个目的,我正在使用gulp-useref,如下所示.

gulp.task('useref', ['clean'], function () {
    return gulp.src(config.paths.app.src + 'index.html')    
    .pipe(gulpif('*.js', uglify()))
    .pipe(gulpif('*.css', cleanCSS()))
    .pipe(useref()) 
    .pipe(gulp.dest(config.paths.dist.src))
});

这个东西简单地连接和缩小我的所有JS和CSS文件,并为它们创建一个脚本和链接标记.一直都好到这里.

现在,我希望对组合的JS和CSS文件实现散列.为此,我正在使用gulp-rev和gulp-rev-replace插件,如下所示.

gulp.task('useref', ['clean'], function () {
    return gulp.src(config.paths.app.src + 'index.html')    
    .pipe(gulpif('*.js', uglify()))
    .pipe(gulpif('*.css', cleanCSS()))
    .pipe(useref())
    .pipe(rev())
    .pipe(revReplace()) 
    .pipe(gulp.dest(config.paths.dist.src))
});

这也适用于一件小事.它不仅为我的JS和CSS文件创建散列文件名,还为我的index.html文件创建散列文件名.

《javascript – 使用useref重命名index.html文件的gulp-rev》

有没有办法可以避免重命名index.html文件,同时仍然保留JS和CSS散列文件名,因为我的服务器会在文件夹中查找index.html文件而不是索引 – ******* **.HTML？

谢谢.

最佳答案 我不确定这是否是解决问题的理想方法,但我的解决方案是应用gulpif来过滤掉css / js资产,然后调用rev(). revReplace仍应更新您的索引文件以使用重命名的css / js资产.

基本上,您可以将以下管道添加到您的流：

.pipe(gulpif(*.{js,css}, rev()))

基于您的代码的示例：

gulp.task('useref', ['clean'], function () {
    return gulp.src(config.paths.app.src + 'index.html')    
    .pipe(gulpif('*.js', uglify()))
    .pipe(gulpif('*.css', cleanCSS()))
    .pipe(useref())
    .pipe(gulpif('*.{js,css}', rev()))
    .pipe(revReplace()) 
    .pipe(gulp.dest(config.paths.dist.src))
});
点赞