Gulp Env und Preprocess

In Grunt verwendete ich ein Plugin namens env. Das würde mir erlauben, eine Umgebung in einem bestimmten Build zu definieren. Ich hatte 3 Builds. Eine war DEV, die alle Dateien einzeln aufgeteilt verwenden würde. PROD würde alles zusammenfassen, und RELEASE würde concat und uglify. Ich möchte dasselbe in Gulp machen. Ich sehe einen Präprozessor für Gulp, aber nichts, um die Umgebung zu definieren.Gulp Env und Preprocess

Die Frage ist. Was kann ich tun? Offensichtlich möchte ich nicht alle JS-Dateien die ganze Zeit definieren, und ich möchte nicht 3 verschiedene HTML-Seiten mit verschiedenen Skript-Tags.

In meinem HTML würde ich so etwas wie dieses:

<!-- @if NODE_ENV == 'DEVELOPMENT' --> 
<script src="js/example1.js" type="text/javascript"></script> 
<script src="js/example2.js" type="text/javascript"></script> 
<script src="js/example3.js" type="text/javascript"></script> 
<!-- @endif --> 

<!-- @if NODE_ENV == 'PRODUCTION' --> 
<script src="js/project.js" type="text/javascript"></script> 
<!-- @endif --> 

<!-- @if NODE_ENV == 'RELEASE' --> 
<script src="js/project.min.js" type="text/javascript"></script> 
<!-- @endif -->

Und mein Grunzen Plugins würde wie folgt aussehen:

env: { 
    dev: { 
     NODE_ENV: 'DEVELOPMENT' 
    }, 
    prod: { 
     NODE_ENV: 'PRODUCTION' 
    }, 
    release: { 
     NODE_ENV: 'RELEASE' 
    } 
}, 
preprocess: { 
    options: { 
     context: { 
      name: '<%= pkg.outputName %>', 
      version: '<%= pkg.version %>', 
      port: '<%= pkg.port %>' 
     } 
    }, 
    dev: { 
     src: 'index.html', 
     dest: '<%= pkg.outputFolder %>/index.html' 
    }, 
    prod: { 
     src: 'index.html', 
     dest: '<%= pkg.outputFolder %>/index.html' 
    }, 
    release: { 
     src: 'index.html', 
     dest: '<%= pkg.outputFolder %>/index.html' 
    } 
},

Quelle

2014-04-16 Chester Rivas

Hier ist, wie ich erreicht, was ich denke, Sie wollen. Ich habe einen Ordner eingerichtet, der HTML-Seiten enthält, die vorverarbeitet werden sollen.

In diesem Ordner habe ich Ordner für jede Seite, wo ich HTML-Fragmente und eine JSON-Datei speichern.

Jede JSON-Datei enthält Variablen, die Seitenressourcen für eine bestimmte Seite definieren.

Sagen Sie zum Beispiel, meine Seite ist index.html. Es sieht etwa so aus:

<html> 
    <head> 
     ... Meta stuff title etc ... 
     <!-- @ifdef pagecss1 --> 
     <link href="<!-- @echo pagecss1 -->" rel="stylesheet"> 
     <!-- @endif --> 
     <!-- @ifdef pagecss2 --> 
     <link href="<!-- @echo pagecss2 -->" rel="stylesheet"> 
     <!-- @endif --> 
    </head> 
     /// so on - same stuff with scripts at bottom

In meiner JSON-Datei für die Seite, die ich entweder pagecss1 definieren oder nicht.

Dann benutze ich gulp.watch.

Ich möchte nicht die ganze Sache schreiben, aber das Ergebnis ist jedes Mal, wenn eine der Dateien in den Unterordnern eine Funktion ändert, die bereits vorhandene globale Kontextvariable abfängt und die JSON-Datei für diese Seite liest. Dann benutze ich node.util._extend, um die Variablen mit seitenspezifischen Variablen zu überschreiben. Ich übergebe dann das geänderte Objekt als Kontext an die Präprozessor-Aufgabe. Es ist alles blitzschnell und gibt einen Callback zurück, der dir anzeigt, welche Seite neu geladen werden soll.

Ich schrieb dies auf Handy, also komme ich vielleicht zurück, um es zu überarbeiten, aber das Lösen dieses Rätsels hat mir unglaublich viel Zeit und Mühe gespart.

Quelle

2014-06-06 18:41:43 user1167442

Dank der großen Schluck-Daten-Plugin wie diese Dinge zu tun, dies wurde vereinfacht sehr. – user1167442

Sie sollten wahrscheinlich schluck-Vorprozess verwenden und in schluck

var preprocess = require('gulp-preprocess'); 
.pipe(preprocess({context: { NODE_ENV: 'PRODUCTION', RELEASE_TAG: '2.6.4', DEBUG: false}}))

mit Sachen wie diese in Ihrem HTML

<!-- @if NODE_ENV='DEVELOPMENT' --> 
    <a href="test?v<!-- @echo RELEASE_TAG -->" /> 
<!-- @endif -->

Quelle

2014-11-07 17:33:44

Antwort

Verwandte Themen