Wie Skript-Tag-URL automatisch auf Build

Question

Ich bin mit Backbone mit Knoten mit dem folgenden Code in index.html

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

main.js sieht wie folgt ändern:

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

In der Produktion I kompilieren die Dateien mit r.js in main-build.js und umleiten den Link in der Datei index.html von main bis main-build:

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

Derzeit, wenn ich meinen Code Produktion bereitstellen möchten, habe ich main-main-build in index.html zu ändern entweder manuell, oder den Link als main-build zu halten, aber den Inhalt von main-build.js, um die Änderung Dasselbe gilt für main.js, wenn ich eine lokale Umgebung oder eine Testumgebung ausführe und dann bei der Bereitstellung in der Produktion zurückwechsle.

Gibt es eine bessere (automatische) Möglichkeit, den Code in der Produktion mit dem kompilierten main-build.js zu verwenden, und den Inhalt von main.js in einer lokalen oder Testumgebung?

zB: mit Knoten Umgebungsvariablen entweder die Links in index.html ändern (nicht sicher, wie html ändern!) Oder den Inhalt von main-build.js ändern, aber der Inhalt jedes Mal r.js überschrieben wird ausgeführt für die Produktion zu kompilieren

Answer 1

Ich persönlich benutze Gulp, um die index.html Datei mit gulp-html-replace zu verarbeiten.

In der Entwicklung setzen Sie die Tags, die Sie benötigen.

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

Um einen Build für die Produktion zu machen, einen großen Schluck Aufgabe erstellen, die die schluck-html-ersetzen Plugin verwendet:

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

---

Wenn Sie die Gulp Weg zu gehen, könnten Sie machen all den Build-Prozess durch. Zum Beispiel ist hier eine einfache Aufgabe 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); 
});