如何在构建时自动更改脚本标签 url

Question

我运行ning Backbone 节点在 index.html

中使用以下代码

<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 并从 [=18= 重定向 index.html 文件中的 link ] 到 main-build:

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

目前，如果我想将我的代码部署到生产环境中，我必须在 index.html 中手动将 main 更改为 main-build，或者保留 link作为 main-build 但当我运行本地或测试环境时将 main-build.js 的内容更改为与 main.js 相同，然后在部署到生产环境时切换回来。

是否有更好的（自动）方式让代码在生产环境中使用编译后的 main-build.js，并在本地或测试环境中使用 main.js 的内容？

例如：使用节点环境变量更改 index.html 中的 link（不确定如何更改 html！）或更改 main-build.js 的内容但是内容每次 r.js 都被覆盖运行为生产编译

Answer 1

我个人使用Gulp to process the index.html file with gulp-html-replace.

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

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

要构建生产环境，请创建一个使用 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 路线，你可以通过它完成所有构建过程。例如，这是一个简单的 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);
});

如何在构建时自动更改脚本标签 url

How to change script tag url automatically on build

javascript

node.js

backbone.js

r.js