javascript - cannot - ¿Cómo puedo usar gulp para reemplazar una cadena en un archivo?

error cannot find module gulp replace

Question

Estoy usando gulp para uglificar y preparar mis archivos javascript para la producción. Lo que tengo es este código:

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

Lo que necesito hacer es reemplazar la cadena:

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

con

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

En el archivo ''temp / js / app / appConstant.js'',

Estoy buscando algunas sugerencias. Por ejemplo, tal vez debería hacer una copia del archivo appConstant.js, cambiar eso (no estoy seguro de cómo) e incluir appConstantEdited.js en el archivo js.src.

Pero no estoy seguro de qué manera hacer una copia de un archivo y reemplazar una cadena dentro de un archivo.

Cualquier ayuda que nos des será muy apreciada.

Answer 1

Aquí tengo un ejemplo específico de versiones para su referencia. Digamos que tienes el archivo version.ts y contiene el código de la versión dentro de él. Ahora puedes hacer lo siguiente:

gulp.task (''version_up'', function () {
    gulp.src (["./version.ts"])
        .pipe (replace (/(/d+)/.(/d+)(?:/.(/d+))?(?:/-(/w+))?/, process.env.VERSION))
        .pipe (gulp.dest (''./''))
});

la expresión regular anterior funciona para muchas situaciones en cualquier formato de versión convencional.

Answer 2

Creo que la solución más correcta es usar el módulo gulp-preprocess . Realizará las acciones que necesite, según la variable PRODUCTION , definida o no definida durante la compilación.

Código fuente:

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

Esta es la mejor solución porque le permite controlar los cambios que se realizan durante la fase de compilación.

Answer 3

También puede usar el módulo gulp-string-replace que se administra con expresiones regulares, cadenas o incluso funciones.

Ejemplo:

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

Cuerda:

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

Función:

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 4

Trague la entrada de secuencias, realice todas las transformaciones y luego transmita la salida. Guardar archivos temporales en medio no es idiomático AFAIK cuando se usa Gulp.

En su lugar, lo que estás buscando es una forma de transmisión de contenido para su transmisión. Sería moderadamente fácil escribir algo usted mismo, o podría usar un complemento existente. Para mí, gulp-replace ha funcionado bastante bien.

Si desea hacer el reemplazo en todos los archivos, es fácil cambiar su tarea de la siguiente manera:

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

También puede hacer gulp.src solo en los archivos en los que espera que se encuentre el patrón, y transmitirlos por separado a través de gulp-replace , fusionándolo con una secuencia gulp.src de todos los demás archivos posteriormente.