34

私は 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 でファイルのコピーを作成し、ファイル内の文字列を置き換える方法がわかりません。

あなたが与えるどんな助けも大歓迎です。

4

4 に答える 4

39

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-27T10:07:24.887 に答える
9

正規表現、文字列、さらには関数で管理するモジュール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'))
});
于 2016-09-10T21:59:46.057 に答える
3

最も正しい解決策は、 gulp-preprocessモジュールを使用することだと思います。PRODUCTIONビルド中に定義されているか定義されていない変数に応じて、必要なアクションを実行します。

ソースコード：

/* @ifndef PRODUCTION */
dataServer: "http://localhost:3048",
/* @endif */
/* @ifdef PRODUCTION **
dataServer: "http://example.com",
/* @endif */

ガルプファイル:

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-01T13:10:56.670 に答える
1

参考までに、バージョニング固有の例を示します。version.ts ファイルがあり、その中にバージョン コードが含まれているとします。次のように実行できるようになりました。

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

上記の正規表現は、従来のバージョン形式の多くの状況で機能します。

于 2018-04-06T04:01:26.423 に答える