如何使用gulp替換文件中的字符串？

我正在使用gulp uglify並準備好用於生產的javascript文件。我所擁有的是這樣的代碼：如何使用gulp替換文件中的字符串？

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://example.com",

在文件「溫度/ JS /應用

dataServer: "http://localhost:3048",

/'appConstant.js'，

我正在尋找一些建議。例如，也許我應該製作appConstant.js文件的副本，更改（不知道如何）並在js.src中包含appConstantEdited.js？

但我不知道如何製作一個文件的副本並替換文件中的字符串。

任何幫助你會非常感謝。

來源

2016-03-27 Alan2

嘗試使用[gulp-replace]（https://www.npmjs.com/package/gulp-replace），或者最好的選擇是[gulp-environments]（https://www.npmjs.com/包/咽的環境） – rmjoia

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流合併。

來源

2016-03-27 10:07:24 Jeroen

你也可以使用模塊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('@[email protected]', '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')) 
});

來源

2016-09-10 21:59:46

我認爲最正確的解決方案是使用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/')); 
}

這是最好的解決方案，因爲它允許您控制那些在構建階段所做的更改。

來源

2018-03-01 13:10:56 ollazarev

如何使用gulp替換文件中的字符串？

回答

相關問題