4

我是使用 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 文件以及下面的文件创建散列文件名。

在此处输入图像描述

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

谢谢。

4

3 回答 3

2

我不确定这是否是解决问题的理想方法，但我的解决方案是申请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))
});
于 2016-09-20T22:57:54.183 回答
0

我有同样的问题，但我正在使用gulp-rev-all而不是gulp-rev像你一样。

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

本质上，您需要在“rev”所有文件后运行另一个 gulp-task。

我gulp-inject用来抓取新修订的文件，并将它们注入到我的 index.html 文件中。

第 1 步：使用gulp-revorgulp-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 注入文档

gulp-rev-所有文档

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

于 2017-03-08T17:41:27.797 回答
-1

尝试

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

return gulp
    .src('......')
    .pipe('......')
    .pipe('......')
    .pipe(ignoreIndexHtml)
    .pipe($.rev())    
    .pipe(ignoreIndexHtml.restore)    
    .pipe($.revReplace())
    .pipe(gulp.dest('......'));
于 2016-07-22T13:57:05.603 回答