使用useref重命名index.html文件的gulp-rev也是如此

Question

我是使用gulp的新手，我正在尝试为我的项目创建gulp文件。

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

%save

这件事简单地连接并缩小我的所有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(gulp.dest(config.paths.dist.src))
});

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

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

感谢。

Answer 1

我不确定这是否是解决问题的理想方式，但我的解决方案是应用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))
});

Answer 2

我遇到了同样的问题，但我使用的是gulp-rev-all而不是gulp-rev。

我的解决方案（解决方法）仍然适用于您和其他感兴趣的人。

基本上，你需要在“修改”所有文件后运行另一个gulp-task。

我使用gulp-inject获取新修订的文件，并将它们注入我的index.html文件。

第1步：在我的案例中使用gulp-rev或gulp-rev-all来修改您的文件并将其保存到/dist文件夹中。

示例：

gulp.task('rev', function () {

   var css= gulp
      .src(styles)
        .pipe(concat('main.css'))
     .pipe(RevAll.revision())
      .pipe(gulp.dest('dist/css'));

    var js = gulp
        .src(scripts)
        .pipe(concat('scripts.js'))
        .pipe(RevAll.revision())
        .pipe(gulp.dest('dist/js'));

    return merge(css, js); //merge is from the gulp plugin merge-stream.  It allows me to manipulate multiple streams in 1 task instead of having separate tasks.

});

第2步： 使用gulp-inject将新创建的css / js文件引用注入index.html

将index.html标记为：

  <!-- inject:css -->
  <!-- endinject -->

<!-- inject:js -->
<!-- endinject -->

第3步： 使用gulp-inject获取新修订的文件并将其注入index.html

gulp.task('inject',
    function() {
        var jsSource = gulp.src('./dist/js/*.js', { read: false });
        var cssSource = gulp.src('./dist/css/*.css', { read: false });
        return gulp.src('./index.html')
            .pipe(inject(merge(jsSource, cssSource)))
            .pipe(clean({force:true}))
        .pipe(gulp.dest('./'));
    });

在我的项目中，我没有把index.html放在dist文件夹中。也许我应该，但在这个例子/项目中，我没有。

我的文件夹结构

index.html
--/dist
---/js
---/css
---/views

gulp-inject documentation

gulp-rev-all documentation

如果有任何其他问题，请告诉我，我很乐意回答他们

Answer 3

试

var ignoreIndexHtml = gulpfilter(['**/*', '!**/index.html'], { restore: true });

return gulp
    .src('......')
    .pipe('......')
    .pipe('......')
    .pipe(ignoreIndexHtml)
    .pipe($.rev())    
    .pipe(ignoreIndexHtml.restore)    
    .pipe($.revReplace())
    .pipe(gulp.dest('......'));