如何自动上构建

我用下面的代码运行与节点骨干在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并将index.html文件中的链接从main转换为main-build：

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

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

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

例如：使用节点环境变量，要么改变index.html链接（不知道如何更改HTML！）或改变的main-build.js内容，但被覆盖每次r.js内容运行编译生产

来源

2017-01-16 Ta946

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

在开发中，您需要放置标签。

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

要构建生产，创建一个使用一饮而尽任务一饮而尽，HTML替换插件：

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

如果你去咕嘟咕嘟的路线，你可以做所有的构建过程都通过它。例如，下面是一个简单的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); 
});

来源

2017-01-16 15:51:07

如何自动上构建

回答

相关问题