Как использовать gulp для замены строки в файле?

Question

Я использую gulp для uglify и готовлю свои файлы javascript для производства. Что у меня есть этот код:

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

Что мне нужно сделать, это заменить строку:

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

с

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

В файле «TEMP/JS/приложение/appConstant.js ',

Я ищу некоторые предложения. Например, возможно, я должен сделать копию файла appConstant.js, изменить это (не уверен, как) и включить appConstantEdited.js в js.src?

Но я не уверен, как сделать копию файла и заменить строку внутри файла.

Любая помощь, которую вы дадите, будет очень признательна.

Answer 1

Gulp streams input, выполняет все преобразования, а затем выводит поток. Сохранение временных файлов между ними является AFAIK неидиоматичным при использовании Gulp.

Вместо этого то, что вы ищете, является потоковым способом замены контента. Было бы легко написать что-то самостоятельно, или вы могли бы использовать существующий плагин. Для меня gulp-replace работал неплохо.

Если вы хотите сделать замену во всех файлах легко изменить свою задачу так:

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

Вы также можете сделать gulp.src только на файлы, которые вы ожидаете шаблон, чтобы быть в, и поток их отдельно через gulp-replace, объединив его с потоком из всех остальных файлов gulp.src.

Answer 2

Вы также можете использовать модуль gulp-string-replace, который управляет регулярным выражением, строками или даже функциями.

Пример:

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

Строка:

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

Функция:

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

Я считаю, что самым правильным решением является использование модуля gulp-preprocess. Он будет выполнять необходимые действия, в зависимости от переменной PRODUCTION, определенной или не определенной во время сборки.

код Источник:

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

Это лучшее решение, поскольку оно позволяет контролировать изменения, которые сделаны на этапе сборки.