Question

我使用index.html

中的以下代码运行Backbone with node

<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>

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

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

例如：使用节点环境变量更改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 -->

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

如何在构建

1 个答案: