Rimuovere gli script da index.html attraverso il gulp

Question

Sto usando gulp nella nostra applicazione, abbiamo 2 flussi in Gulpfile.js, uno per la produzione e il secondo per lo sviluppo, ma non voglio tenere 2 file index.html, ad es. index.html e index.dev. html, voglio avere un file index.html, ma per la build di produzione ho degli script che non sono necessari per es.

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

domanda è: Come posso rimuovere qualcosa da HTML attraverso Gulp?

Answer 1

È possibile utilizzare la gulp-html-sostituzione plugin che è destinato a questo specifico scopo:

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

Answer 2

Si potrebbe approccio è leggermente diverso: templatize tua index.html e usare il plugin gulp-template per elaborare il modello in vostro costruire:

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

e la tua index.html potrebbe essere trasformata in un modello in questo modo:

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

Naturalmente si potrebbe scrivere il flusso proprio plugin/pass-through che rimuove gli script dal vostro index.html ma richiederebbe l'analisi attuale/riscrittura del index.html. personalmente trovo la soluzione basata su template più facile da mettere in atto e più "elegante".