Remove scripts from index.html through gulp

Question

I'am using gulp in our application, we have 2 flows in Gulpfile.js, one for production and second for development, but I dont want to keep 2 index.html files e.g. index.html and index.dev. html, I want to have one index.html file, but for production build I have scripts which are no needed e.g .

 <!--dev depends -->
    <script src="angular-mocks/angular-mocks.js"></script>
    <script src="server.js"></script>
 <!--dev depends -->

question is: How can I remove something from html through Gulp ?

Answer 1

You can use the gulp-html-replace plugin which is intended for this specific purpose :

https://www.npmjs.org/package/gulp-html-replace

Answer 2

You could approach is slightly differently: templatize your index.html and use the gulp-template plugin to process the template in your build:

var template = require('gulp-template');

//production task 
gulp.task('prod', function () {
    return gulp.src('src/index.html').pipe(template({
        scripts : []
    })).pipe(gulp.dest('dist'));
});


//dev task
gulp.task('prod', function () {
    return gulp.src('src/index.html').pipe(template({
        scripts : ['angular-mocks/angular-mocks.js', 'server.js']
    })).pipe(gulp.dest('dist'));
});

and your index.html could be turned into a template like so:

<% _.forEach(scripts, function(name) { %><script src="<%- name %>" type="text/javascript"></script><% }); %>

Of course you could write your own plugin / pass-through stream that removes scripts from your index.html but it would require actual parsing / re-writing of the index.html. personally I find the template-based solution easier to put in place and more "elegant".