Javascript 如何使用 gulp 替换文件中的字符串？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36243881/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I use gulp to replace a string in a file?
提问by Alan2
I am using gulp to uglify and make ready my javascript files for production. What I have is this code:
我正在使用 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/'));
});
What I need to do is to replace the string:
我需要做的是替换字符串：
dataServer: "http://localhost:3048",
with
和
dataServer: "http://example.com",
In the file 'temp/js/app/appConstant.js',
在文件“temp/js/app/appConstant.js”中，
I'm looking for some suggestions. For example perhaps I should make a copy of the appConstant.js file, change that (not sure how) and include appConstantEdited.js in the js.src?
我正在寻找一些建议。例如，也许我应该复制 appConstant.js 文件，更改它（不确定如何）并在 js.src 中包含 appConstantEdited.js？
But I am not sure with gulp how to make a copy of a file and replace a string inside a file.
但我不确定 gulp 如何制作文件副本并替换文件中的字符串。
Any help you give would be much appreciated.
您提供的任何帮助将不胜感激。
回答by Jeroen
Gulp streams input, does all transformations, and then streams output. Saving temporary files in between is AFAIK non-idiomatic when using Gulp.
Gulp 流输入，执行所有转换，然后流输出。使用 Gulp 时，在两者之间保存临时文件是 AFAIK 非惯用的。
Instead, what you're looking for, is a streaming-way of replacing content. It would be moderately easy to write something yourself, or you could use an existing plugin. For me, gulp-replacehas worked quite well.
相反，您正在寻找的是一种替换内容的流媒体方式。自己编写一些东西会比较容易，或者您可以使用现有的插件。对我来说，gulp-replace效果很好。
If you want to do the replacement in all files it's easy to change your task like this:
如果您想在所有文件中进行替换，很容易像这样更改您的任务：
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/'));
});
You could also do gulp.srcjust on the files you expect the pattern to be in, and stream them seperately through gulp-replace, merging it with a gulp.srcstream of all the other files afterwards.
您也可以gulp.src只对您希望模式所在的文件进行处理，并通过 单独流式传输它们gulp-replace，然后将其与gulp.src所有其他文件的流合并。
回答by Tomasz Czechowski
You may also use module gulp-string-replacewhich manages with regex, strings or even functions.
您还可以使用模块gulp-string-replace来管理正则表达式、字符串甚至函数。
Example:
例子：
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'))
});
String:
细绳：
gulp.task('replace_1', function() {
gulp.src(["./config.js"]) // Every file allown.
.pipe(replace('environment', 'production'))
.pipe(gulp.dest('./build/config.js'))
});
Function:
功能：
gulp.task('replace_1', function() {
gulp.src(["./config.js"]) // Every file allown.
.pipe(replace('environment', function () {
return 'production';
}))
.pipe(gulp.dest('./build/config.js'))
});
回答by ollazarev
I think that the most correct solution is to use the gulp-preprocessmodule. It will perform the actions you need, depending on the variable PRODUCTION, defined or not defined during the build.
我认为最正确的解决方案是使用gulp-preprocess模块。它将执行您需要的操作，具体取决于在PRODUCTION构建期间定义或未定义的变量。
Source code:
源代码：
/* @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/'));
}
This is the best solution because it allows you to control the changes that are made during the build phase.
这是最好的解决方案，因为它允许您控制在构建阶段所做的更改。
回答by GFxJamal
There I have a versioning specific example for your reference. let say you have version.ts file and it contains the version code inside it. You now can do as the follows:
我有一个版本控制特定示例供您参考。假设您有 version.ts 文件，其中包含版本代码。您现在可以执行以下操作：
gulp.task ('version_up', function () {
gulp.src (["./version.ts"])
.pipe (replace (/(\d+)\.(\d+)(?:\.(\d+))?(?:\-(\w+))?/, process.env.VERSION))
.pipe (gulp.dest ('./'))
});
the above regex works for many situation on any conventional version formats.
上述正则表达式适用于任何传统版本格式的许多情况。
