Gulp: convert java scripts extension in index.html

Question

I am trying to convert java scripts extension '.js' to '.js.gz'. For this i chose gulp-html-replace module. But i am unable to get the desired result. For below example i am using two scripts but i have more.

index.html (Before):

<!-- 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 (After gulp index.html should be like this):

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

But instead i am getting this after running gulp task

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

Gulp task:

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;
        }))
});

If somebody know better module for this kind of task, please recommend. And please help to correct my gulp task

Answer 1

Try this plugin gulp-replace. But I don't know why regex grouping Not working properly.

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;
        }))
});