gulpを使用してファイル内の文字列を置き換えるにはどうすればよいですか？

Question

私はgulpを使ってuglifyし、プロダクション用の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://example.com", 

と

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

を「一時/ JS /アプリ/ appConstant.js '、

私はいくつかの提案をお探ししています。たとえば、おそらく私はappConstant.jsファイルのコピーを作成し、それを変更して（どうすればよいか）、appConstantEdited.jsをjs.srcにインクルードする必要がありますか？

しかし、ファイルのコピーを作成してファイル内の文字列を置き換える方法についてはわかりません。

ご協力いただければ幸いです。

Answer 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.srcストリームと後でそれをマージするgulp-replaceを別々に実行します。

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

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

それはあなたがビルドフェーズの間に行われた変更を制御することができますので、これが最善の解決策です。