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

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

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


javascript gulp gulp-concat gulp-replace
person Alan2    schedule 27.03.2016    source источник
comment
попробуйте с gulp-replace или, возможно, лучше всего подойдет gulp-environments   -  person rmjoia    schedule 27.03.2016

Ответы (4)


arrow_upward
35
arrow_downward

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 всех остальных файлов впоследствии.

person Jeroen    schedule 27.03.2016

arrow_upward
9
arrow_downward

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

Пример:

Регулярное выражение:

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'))
});
person Tomasz Czechowski    schedule 10.09.2016

arrow_upward
3
arrow_downward

Я думаю, что наиболее правильным решением будет использование модуля 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/'));
}

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

person ollazarev    schedule 01.03.2018

arrow_upward
1
arrow_downward

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

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

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

person GFxJamal    schedule 06.04.2018