如何使用 gulp 替换文件中的字符串?
How can I use gulp to replace a string in a file?
我正在使用 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 文件,更改它(不确定如何更改)并在 js.src?
中包含 appConstantEdited.js
但我不确定 gulp 如何复制文件并替换文件中的字符串。
我们将不胜感激。
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
流合并之后的其他文件。
您也可以使用模块 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'))
});
我认为最正确的解决方案是使用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/'));
}
这是最佳解决方案,因为它允许您控制在构建阶段所做的更改。
我有一个具体的版本控制示例供您参考。
假设您有 version.ts 文件并且其中包含版本代码。您现在可以进行如下操作:
gulp.task ('version_up', function () {
gulp.src (["./version.ts"])
.pipe (replace (/(\d+)\.(\d+)(?:\.(\d+))?(?:\-(\w+))?/, process.env.VERSION))
.pipe (gulp.dest ('./'))
});
以上正则表达式适用于任何传统版本格式的许多情况。
我正在使用 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 文件,更改它(不确定如何更改)并在 js.src?
中包含 appConstantEdited.js但我不确定 gulp 如何复制文件并替换文件中的字符串。
我们将不胜感激。
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
流合并之后的其他文件。
您也可以使用模块 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'))
});
我认为最正确的解决方案是使用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/'));
}
这是最佳解决方案,因为它允许您控制在构建阶段所做的更改。
我有一个具体的版本控制示例供您参考。 假设您有 version.ts 文件并且其中包含版本代码。您现在可以进行如下操作:
gulp.task ('version_up', function () {
gulp.src (["./version.ts"])
.pipe (replace (/(\d+)\.(\d+)(?:\.(\d+))?(?:\-(\w+))?/, process.env.VERSION))
.pipe (gulp.dest ('./'))
});
以上正则表达式适用于任何传统版本格式的许多情况。