javascript - 如何使用gulp重命名index.html中脚本的原始文件？

Question

我编写了一个 gulp 任务来重命名文件，以便对它们进行版本控制。问题在于 index.html 脚本引用的文件的文件名未更改。

例如，在我的index.html中:

<script src=pub/main_v1.js"></script>

但是，如果您实际上通过构建文件夹导航到子目录 pub，您将找到 main.js。

这是自定义 gulp 任务:

const gulpConcat = require('gulp-concat');
const gulpReplace = require('gulp-replace');
const version = require('./package.json').version;

gulp.task('version', function () {
    var vsn = '_' + version + '.js';
    gulp.src('scripts/**/*.js')
        .pipe(gulpConcat(vsn))
        .pipe(gulp.dest('./prodBuild'));

    return gulp.src('./prodBuild/index.html', { base: './prodBuild' })
        .pipe(gulpReplace(/* some regex */, /* append vsn */))
        .pipe(gulp.dest('./prodBuild'));
});

我需要修复/添加什么才能使原始文件名更改以匹配脚本标记中的文件名？

注:根据gulp-concat docs ，我应该能够在 prodBuild/[vsn] 找到串联文件，其中 [vsn] 是 _v1.js。然而，却无处可寻。

更新:文件在index.html中正确重命名，但我似乎无法使原始文件的重命名起作用。这是我的构建目录的快照:

prodBuild/
 pub/
   main.js
 someDir/
   subDirA/
     // unimportant stuff
   subDirB/
     file2.js
   file3.js
 // ...other files and folders...

Answer 1

编辑: 问题是您只返回两个任务之一。第一个任务被 gulp 忽略，因为它没有返回。一个简单的解决方案:将其拆分为两个任务，并从另一个任务中引用一个任务，如 this SO answer 中所示。 .

旧答案

这看起来是 gulp-rename 的完美案例。 。您可以简单地通过gulp-rename管道传输脚本，如下所示:

.pipe(rename(function (path) {
    path.basename += vsn;
    path.extname = ".js"
  }))

据我所知，Gulp concat 是为了连接文件而设计的，而不是专门用于重命名它们。