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

Я использую 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/app/appConstant.js",

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

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

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

Ответ 1

Gulp вводит поток, выполняет все преобразования, а затем выводит поток. Сохранение временных файлов между ними - это неидиоматический 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 всех остальных файлов.

Ответ 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('@[email protected]', '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'))
});

Функция:

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

Ответ 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/'));
}

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