Gulp：在 index.html 中转换 java 脚本扩展

Question

我正在尝试将 java 脚本扩展名“.js”转换为“.js.gz”。为此我选择了gulp-html-replace 模块。但我无法得到想要的结果。对于下面的示例，我使用了两个脚本，但我还有更多。

index.html（之前）：

<!-- build:js -->
    <script src="routing_components/app-routing/app-routing.component.js"></script>
    <script src="routing_components/home-routing/home-routing.component.js"></script>
<!-- endbuild -->

index.html（gulp后index.html应该是这样的）：

<script src="routing_components/app-routing/app-routing.component.js.gz"></script>
<script src="routing_components/home-routing/home-routing.component.js.gz"></script>

但是我在运行 gulp 任务后得到了这个

<script src="index.js.gz"></script>

Gulp 任务：

gulp.task('index_gzip', function () {
    gulp.src('app/index.html')
        .pipe(htmlreplace({
            js: {
                src: null,
                tpl: '<script src="%f.js.gz"></script>'
            }
        }))
        .pipe(gulp.dest(function (file) {
            return file.base;
        }))
});

如果有人知道此类任务的更好模块，请推荐。请帮助纠正我的 gulp 任务

Answer 1

试试这个插件gulp-replace。但我不知道为什么正则表达式分组不能正常工作。

var replace = require('gulp-replace');
gulp.task('index_gzip', function () {
    gulp.src('app/index.html')
        .pipe(replace(/(<script.*?src=\")(.*?).js\"/g, '$1$2.js.gz"'))
        .pipe(gulp.dest(function (file) {
            return file.base;
        }))
});