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

Question

Я использую gulp, чтобы увеличить и подготовить мои файлы 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, как сделать копию файла и заменить строку внутри файла.

Любая помощь, которую вы дадите, будет высоко ценится

Answer 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 поток всех других файлов потом.

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

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

Answer 4

Там у меня есть конкретный пример управления версиями для вашей справки. допустим, у вас есть файл version.ts, и он содержит код версии внутри него. Теперь вы можете сделать следующее:

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

Вышеупомянутое регулярное выражение работает для многих ситуаций на любых традиционных форматах версий.