Wie kann ich mit gulp eine Zeichenfolge in einer Datei ersetzen?

Question

Ich benutze Schluck zu uglify und mache meine Javascript-Dateien für die Produktion bereit. Was ich habe, ist dieser Code:

var concat = require('gulp-concat'); 
var del = require('del'); 
var gulp = require('gulp'); 
var gzip = require('gulp-gzip'); 
var less = require('gulp-less'); 
var minifyCSS = require('gulp-minify-css'); 
var uglify = require('gulp-uglify'); 

var js = { 
    src: [ 
     // more files here 
     'temp/js/app/appConfig.js', 
     'temp/js/app/appConstant.js', 
     // more files here 
    ], 

gulp.task('scripts', ['clean-js'], function() { 
    return gulp.src(js.src).pipe(uglify()) 
     .pipe(concat('js.min.js')) 
     .pipe(gulp.dest('content/bundles/')) 
     .pipe(gzip(gzip_options)) 
     .pipe(gulp.dest('content/bundles/')); 
}); 

Was muss ich tun, um die Zeichenfolge zu ersetzen:

dataServer: "http://localhost:3048", 

mit

dataServer: "http://example.com", 

In der Datei ‚temp/js/app/appConstant.js ',

Ich bin auf der Suche nach ein paar Anregungen. Zum Beispiel sollte ich vielleicht eine Kopie der appConstant.js-Datei machen, diese ändern (nicht sicher wie) und appConstantEdited.js in die js.src aufnehmen?

Aber ich bin nicht sicher mit Schluck, wie man eine Kopie einer Datei erstellt und eine Zeichenfolge in einer Datei ersetzt.

Jede Hilfe, die Sie geben, würde sehr geschätzt werden.

Answer 1

Gulp Streams Eingabe, führt alle Transformationen und dann Streams Ausgabe. Speichern von temporären Dateien dazwischen ist AFAIK nicht idiomatisch bei der Verwendung von Gulp.

Was Sie stattdessen suchen, ist eine Streaming-Möglichkeit, Inhalte zu ersetzen. Es wäre mäßig einfach, selbst etwas zu schreiben, oder Sie könnten ein bestehendes Plugin verwenden. Für mich hat gulp-replace ganz gut funktioniert.

Wenn Sie den Austausch in allen Dateien tun möchten ist es einfach Ihre Aufgabe wie folgt zu ändern:

var replace = require('gulp-replace'); 

gulp.task('scripts', ['clean-js'], function() { 
    return gulp.src(js.src) 
     .pipe(replace(/http:\/\/localhost:\d+/g, 'http://example.com')) 
     .pipe(uglify()) 
     .pipe(concat('js.min.js')) 
     .pipe(gulp.dest('content/bundles/')) 
     .pipe(gzip(gzip_options)) 
     .pipe(gulp.dest('content/bundles/')); 
}); 

Sie könnten auch gulp.src auf die Dateien, die Sie das Muster in sein erwarten nur tun, und sie streamen separat durch gulp-replace, fusionieren Sie es mit einem gulp.src Strom von allen anderen Dateien danach.

Answer 2

Sie können auch das Modul gulp-string-replace verwenden, das mit Regex, Strings oder sogar Funktionen arbeitet.

Beispiel:

Regex:

var replace = require('gulp-string-replace'); 

gulp.task('replace_1', function() { 
    gulp.src(["./config.js"]) // Every file allown. 
    .pipe(replace(new RegExp('@env@', 'g'), 'production')) 
    .pipe(gulp.dest('./build/config.js')) 
}); 

String:

gulp.task('replace_1', function() { 
    gulp.src(["./config.js"]) // Every file allown. 
    .pipe(replace('environment', 'production')) 
    .pipe(gulp.dest('./build/config.js')) 
}); 

Funktion:

gulp.task('replace_1', function() { 
    gulp.src(["./config.js"]) // Every file allown. 
    .pipe(replace('environment', function() { 
     return 'production'; 
    })) 
    .pipe(gulp.dest('./build/config.js')) 
}); 

Answer 3

Ich denke, dass die korrekte Lösung ist, das gulp-preprocess Modul zu verwenden. Abhängig von der Variablen PRODUCTION, die während des Builds definiert oder nicht definiert wurde, führt sie die erforderlichen Aktionen aus.

Quellcode:

/* @ifndef PRODUCTION */ 
dataServer: "http://localhost:3048", 
/* @endif */ 
/* @ifdef PRODUCTION ** 
dataServer: "http://example.com", 
/* @endif */ 

Gulpfile:

let preprocess = require('gulp-preprocess'); 
const preprocOpts = { 
    PRODUCTION: true 
}; 

gulp.task('scripts', ['clean-js'], function() { 
    return gulp.src(js.src) 
    .pipe(preprocess({ context: preprocOpts })) 
    .pipe(uglify()) 
    .pipe(concat('js.min.js')) 
    .pipe(gulp.dest('content/bundles/')); 
} 

Dies ist die beste Lösung, weil es Ihnen erlaubt, um die Änderungen zu steuern, die während der Aufbauphase hergestellt werden.