webentwicklung-frage-antwort-db.com.de

Wie kann ich gulp verwenden, um eine Zeichenfolge in einer Datei zu ersetzen?

Ich verwende gulp, um meine Javascript-Dateien für die Produktion zu hässlich zu machen und vorzubereiten. Was ich habe, ist dieser Code:

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

Was ich tun muss, ist die Zeichenfolge zu ersetzen:

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

mit

dataServer: "http://example.com",

In der Datei 'temp/js/app/appConstant.js'

Ich suche ein paar Vorschläge. Zum Beispiel sollte ich vielleicht eine Kopie der Datei appConstant.js erstellen, das ändern (nicht sicher, wie) und appConstantEdited.js in die js.src aufnehmen?

Ich bin mir jedoch nicht sicher, wie ich mit gulp eine Kopie einer Datei erstellen und eine Zeichenfolge in einer Datei ersetzen soll.

Jede Hilfe, die Sie geben, wäre sehr dankbar.

21
Alan2

Gulp streamt die Eingabe, führt alle Transformationen durch und streamt dann die Ausgabe. Das Speichern temporärer Dateien dazwischen ist bei Verwendung von Gulp AFAIK-nicht idiomatisch.

Stattdessen suchen Sie nach einem Streaming-Verfahren zum Ersetzen von Inhalten. Es wäre mäßig einfach, selbst etwas zu schreiben, oder Sie könnten ein vorhandenes Plugin verwenden. Für mich, gulp-replace hat ganz gut funktioniert.

Wenn Sie das Ersetzen in allen Dateien durchführen möchten, können Sie Ihre Aufgabe leicht wie folgt ändern:

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

Sie könnten auch gulp.src nur auf die Dateien, in denen das Muster erwartet wird, und streamen Sie sie separat durch gulp-replace, verschmilzt es mit einem gulp.src Stream aller anderen Dateien danach.

28
Jeroen

Sie können auch das Modul gulp-string-replace verwenden, das mit Regex, Strings oder sogar Funktionen auskommt.

Beispiel:

Regex:

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

Zeichenfolge:

gulp.task('replace_1', function() {
  gulp.src(["./config.js"]) // Every file allown. 
    .pipe(replace('environment', 'production'))
    .pipe(gulp.dest('./build/config.js'))
});

Funktion:

gulp.task('replace_1', function() {
  gulp.src(["./config.js"]) // Every file allown. 
    .pipe(replace('environment', function () {
       return 'production';
    }))
    .pipe(gulp.dest('./build/config.js'))
});
8

Ich denke, dass die korrekteste Lösung die Verwendung des gulp-preprocess Moduls ist. Abhängig von der Variablen PRODUCTION, die während des Builds definiert oder nicht definiert wurde, werden die erforderlichen Aktionen ausgeführt.

Quellcode:

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

Dies ist die beste Lösung, da Sie damit die Änderungen steuern können, die während der Erstellungsphase vorgenommen werden.

2
ollazarev

Dort habe ich ein versionierungsspezifisches Beispiel für Ihre Referenz. Nehmen wir an, Sie haben die Datei version.ts und sie enthält den darin enthaltenen Versionscode. Sie können nun wie folgt vorgehen:

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

der obige reguläre Ausdruck funktioniert in vielen Situationen mit allen herkömmlichen Versionsformaten.

1
GFxJamal