gulp.js + browserify: Entwicklungsspezifische Dateien dynamisch generieren

Question

Ich habe eine Anwendung, die einen entwicklungsspezifischen Debugging-Code enthält. Gegenwärtig wird der gesamte Entwicklungscode von einer Variablen namens dev am Anfang der Datei geschützt. Hier ist ein Beispiel dafür, was meine app tut:

var dev = true; 

if (dev) { 
    console.log("Hello developer"); 
} else { 
    console.log("Hello production"); 
} 

Wenn ich meine Anwendung zu implementieren, muss ich manuell die variable Form dev ändern true in false. Das ist scheiße.

Ich bin in der Mitte der Migration von handgerollten Builds zu gulp.js und ich möchte dieses Problem im Hinblick auf Entwicklung und Produktion sauber lösen. Ich denke an die folgende:

// Inside main.js 
var dev = require('./isdev'); 
if (dev) //... 

// Inside isdev.js: 
module.exports = true; 

Nun, wenn ich für die Produktion bauen, anstatt manuell die dev-Flag auf false Einstellung möchte ich isdev.js module.exports = true;-module.exports = false; ersetzen. Meine spezifische Frage ist, Wie automatisiere ich Schluck, so dass gulp development eine Datei mit dev = true produziert und gulp production eine Datei mit dev = false produziert.

Answer 1

Hier ist ein Update für diejenigen, die neugierig sind.

Zuerst habe ich ein options.js:

exports.dev = false; 

Ich habe eine auch options_dev.js:

exports.dev = true; 

Innerhalb von gulpfile.js, ich habe den folgenden Code, die Eingabeargumente analysiert:

// Parse the arguments. Use `gulp --prod` to build a production extension 
var argv = parseArgs(process.argv.slice(2)); 
var dev = !argv['prod']; // Whether to build a development extension or not 

Schließlich, wenn ich zu browserifizieren, habe ich die folgenden:

var resolve = require('browser-resolve'); 
// ... 
.pipe(browserify({ 
    debug: dev, 
    resolve: function(pkg, opts) { 
    // Replace options.js with options_dev.js if this is a dev build 
    if (dev) { 
     opts.modules['./options'] = 'src/options_dev.js'; 
    } 
    return resolve.apply(this, arguments); 
    } 
})) 

Die Magie geschieht durch eine benutzerdefinierte resolve-Funktion, dynamisch ./options mit options_dev Swapping für die Entwicklung aufbaut. Die browserify-Dokumentation lautet:

Sie können browserify eine benutzerdefinierte opts.resolve() -Funktion geben oder standardmäßig browser-resolve verwenden.

Wenn wir gulp ausführen, erstellen wir eine Entwicklungsversion. Wenn wir gulp --prod ausführen, erstellen wir eine Produktionsversion. Mit dem Wert require('./options').dev können wir Dinge wie Serverendpunkte usw. dynamisch ändern. Cool!

Answer 2

Der Weg, den ich gesehen habe, besteht darin, die Umgebungsvariable in der Befehlszeile vor dem Ausführungsbefehl zu setzen. mit dem Node.JS CLI Ein Beispiel dafür tun (in einer Bash-ähnlichen Umgebung) wäre:

ENV=dev node 

> process.env.ENV 
'dev' 

Dann in Ihrem Code, könnten Sie tun:

var dev = process.env.ENV === 'dev' 

Also mit großem Schluck, Sie verwenden:

ENV=dev gulp <task name> 

getestet habe ich diese mit dem folgenden Ausschnitt aus, und es funktioniert:

gulp.task('dev', function(){ 
    if (process.env.ENV === 'dev') 
    console.log("IT WORKED"); 
    else 
    console.log("NO DICE"); 
}); 

Edit:

Sie können isdev Recht vor, die Umwelt in die Datei schreiben, bevor Gebäude:

var fs = require('fs'); 
gulp.task('build', function(){ 
    if (process.env.ENV === 'dev') 
    fs.writeFileSync('isdev', 'module.exports = true'); 
    else 
    fs.writeFileSync('isdev', 'module.exports = false'); 

    // kick off build 
}); 

nun der richtige Wert in isdev für jeden require Aufruf im integrierten Bündel vorhanden sein wird . Sie können dies auch auf andere angegebene Umgebungen (oder auf andere Konfigurationsflags) erweitern.