如何使用 gulp 替换文件中的字符串？答案

【问题标题】：How can I use gulp to replace a string in a file?如何使用 gulp 替换文件中的字符串？
【发布时间】：2016-03-27 04:36:50
【问题描述】：

我正在使用 gulp 对我的 javascript 文件进行 uglify 并准备好用于生产。我所拥有的是这段代码：

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 如何复制文件并替换文件中的字符串。

您提供的任何帮助将不胜感激。

【问题讨论】：

试试gulp-replace 或者最合适的可能是gulp-environments

标签： javascript gulp gulp-concat gulp-replace

【解决方案1】：

Gulp 流输入，进行所有转换，然后流输出。使用 Gulp 时，在两者之间保存临时文件是 AFAIK 非惯用的。

相反，您正在寻找的是一种替换内容的流式传输方式。自己写一些东西会比较容易，或者你可以使用现有的插件。对我来说，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，它使用正则表达式、字符串甚至函数进行管理。

示例：

正则表达式：

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

【讨论】：

【解决方案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/'));
}

这是最好的解决方案，因为它允许您控制在构建阶段所做的更改。

【讨论】：

【解决方案4】：

我有一个版本控制特定示例供您参考。假设您有 version.ts 文件，其中包含版本代码。您现在可以执行以下操作：

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

上述正则表达式适用于任何常规版本格式的许多情况。

【讨论】：