如何在构build时自动更改脚本标记url

我正在使用index.html的以下代码运行Backbone节点

 <script src="js/api/require.js"></script> <script>require(['js/require-cfg'],function(){require(['main'])});</script> 

main.js看起来像这样：

 require(['app'], function(App){ App.initialize(); } ); 

在生产中，我使用r.js将文件编译到main-build.js ，并将index.html文件中的链接从mainredirect到main-build ：

 <script>require(['js/require-cfg'],function(){require(['main-build'])});</script> 

目前，如果我想将我的代码部署到生产环境中，则必须手工将index.html main-build修改为main-build ，或者将链接保持为main-build但将main-build.js的内容更改为相同作为main.js当我运行本地或testing环境，然后切换回部署到生产。

有没有更好的（自动）方式让代码在生产时使用编译的main-build.js ，以及在本地或testing环境中使用main.js的内容？

例如：使用节点环境variables来更改index.html的链接（不知道如何更改html！）或更改main-build.js的内容，但是每次运行r.js以编译生产

Answer 1

我个人使用Gulp处理与gulp-html-replace的index.html文件。

在开发中，你把你需要的标签。

 <script src="js/api/require.js"></script> <!-- build:js --> <script>require(['js/require-cfg'],function(){require(['main'])});</script> <!-- endbuild --> 

为了生产生产，创build一个使用gulp-html-replace插件的gulp任务：

 var gulp = require('gulp'), htmlreplace = require('gulp-html-replace'); gulp.task('build', function() { return gulp.src("index.html") .pipe(htmlreplace({ js: { src: [['main-build']], tpl: '<script>require(["js/require-cfg"],function(){require(["%s"])});</script>' }, })) .pipe(gulp.dest("build/index.html")); }); 

---

如果你走了Gulp路线，你可以通过它来完成所有的构build过程。 例如，这是一个简单的r.js任务：

 var rjs = require('requirejs'); gulp.task('optimize', function(done) { rjs.optimize({ name: "main", out: "build/js/main.min.js", /* ...other options */ }, function(buildResponse) { done(); }, done); });