從index.html通過gulp刪除腳本

Question

我在我們的應用程序中使用gulp，我們在Gulpfile.js中有2個流程，一個用於生產，第二個用於開發，但我不想保留2個index.html文件，例如index.html和index.dev。 html，我想要一個index.html文件，但對於生產版本，我有不需要的腳本，例如。

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

問題是： 如何通過Gulp從html中刪除某些內容 ？

Answer 1

您可以使用專門用於此特定目的的gulp-html-replace插件：

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

Answer 2

您的方法可能略有不同：模板化您的index.html並使用gulp-template插件處理您的構建中的模板：

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

並且您的index.html可以變成這樣的模板：

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

當然，您可以編寫自己的插件/傳遞流，從index.html中刪除腳本，但這需要對index.html進行實際的解析/重寫。 我個人認為基於模板的解決方案更容易實施，更“優雅”。