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

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

15
gulp gulp-concat gulp-replace javascript

4 ответов

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

22

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

пример:

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

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

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

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

2

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

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

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

1