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

【问题标题】：How to change script tag url automatically on build如何在构建时自动更改脚本标签 url
【发布时间】：2017-01-16 11:27:00
【问题描述】：

我正在使用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 文件中的链接从main 重定向到main-build ：

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

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

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

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

【问题讨论】：

标签： javascript node.js backbone.js r.js

【解决方案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 -->

要进行生产构建，请创建一个使用 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);
});

【讨论】：