Jak mogę użyć gulp do zamiany łańcucha w pliku?

Question

Używam gulp do wbicia i przygotowania plików javascript do produkcji. To, co mam jest ten kod:

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/')); 
}); 

co muszę zrobić, to wymienić łańcuch:

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

z

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

W pliku „temp/js/app/appConstant.js ',

Szukam wskazówek. Na przykład może powinienem zrobić kopię pliku appConstant.js, zmienić to (nie wiem jak) i dołączyć appConstantEdited.js do js.src?

Ale nie jestem pewien, czy mogę zrobić kopię pliku i zastąpić ciąg wewnątrz pliku.

Każda pomoc udzielona zostanie doceniona.

Answer 1

Wejście Gulp, wykonuje wszystkie transformacje, a następnie wyprowadza strumienie. Zapisywanie plików tymczasowych pomiędzy jest AFAIK nie-idiomatyczne podczas używania Gulp.

Zamiast tego, czego szukasz, to strumieniowa wymiana treści. Łatwo byłoby napisać coś samodzielnie lub użyć istniejącej wtyczki. Dla mnie, gulp-replace działa całkiem dobrze.

Jeśli chcesz zrobić wymianę we wszystkich plikach łatwo zmienić swoje zadanie tak:

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/')); 
}); 

Można również zrobić gulp.src tylko na plikach można oczekiwać wzór być w, i przesyłać je osobno przez gulp-replace, łącząc go później ze strumieniem wszystkich pozostałych plików gulp.src.

Answer 2

Możesz również użyć modułu gulp-string-replace, który zarządza za pomocą wyrażenia regularnego, ciągów znaków, a nawet funkcji.

przykład:

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

Ciąg:

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

Funkcja:

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

Myślę, że najodpowiedniejszym rozwiązaniem jest użycie modułu gulp-preprocess. Wykona on wymagane działania, w zależności od zmiennej PRODUCTION, zdefiniowanej lub niezdefiniowanej podczas kompilacji.

kod źródłowy:

/* @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/')); 
} 

Jest to najlepsze rozwiązanie, ponieważ pozwala kontrolować zmiany, które zostały wprowadzone na etapie kompilacji.