Come posso usare gulp per sostituire una stringa in un file?

Question

Sto usando gulp per ugolare e preparare i miei file javascript per la produzione. Quello che ho è questo codice:

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

Che cosa devo fare è di sostituire la stringa:

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

con

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

Nel file 'temp/js/app/appConstant.js ',

Sto cercando alcuni suggerimenti. Ad esempio, forse dovrei fare una copia del file appConstant.js, cambiarlo (non so come) e includere appConstantEdited.js in js.src?

Ma non sono sicuro di sapere come fare una copia di un file e sostituire una stringa all'interno di un file.

Qualsiasi aiuto tu possa dare sarebbe molto apprezzato.

Answer 1

Ingresso flussi Gulp, tutte le trasformazioni e quindi i flussi in uscita. Il salvataggio di file temporanei nel mezzo è AFAIK non idiomatico quando si usa Gulp.

Invece, quello che stai cercando è un modo per sostituire i contenuti in streaming. Sarebbe moderatamente facile scrivere qualcosa da te, oppure potresti usare un plugin esistente. Per me, gulp-replace ha funzionato abbastanza bene.

Se si vuole fare la sostituzione in tutti i file è facile cambiare il vostro compito in questo modo:

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

Si potrebbe anche fare gulp.src solo sui file che ci si aspetta lo schema di essere in, e in streaming separatamente attraverso gulp-replace, unendola con uno stream gulp.src di tutti gli altri file in seguito.

Answer 2

È anche possibile utilizzare il modulo gulp-string-replace che gestisce con espressioni regolari, stringhe o anche funzioni.

Esempio:

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

Funzione:

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

Penso che la soluzione più corretta sia utilizzare il modulo gulp-preprocess. Eseguirà le azioni necessarie, in base alla variabile PRODUCTION, definita o non definita durante la compilazione.

Codice sorgente:

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

Questa è la soluzione migliore perché permette di controllare le modifiche apportate durante la fase di costruzione.