Comment puis-je utiliser gulp pour remplacer une chaîne de caractères dans un fichier?

Je suis en utilisant gorgée de uglify et préparer mes fichiers javascript pour la production. Ce que j'ai est ce 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/'));
});

Ce que je dois faire est de remplacer la chaîne:

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

avec

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

Dans le fichier 'temp/js/app/appConstant.js',

Je suis à la recherche de quelques suggestions. Pour exemple, peut-être que je devrais faire une copie de la appConstant.js fichier, de changer (je ne sais pas comment) et comprennent appConstantEdited.js dans le js.src?

Mais je ne suis pas sûr qu'avec gulp comment faire une copie d'un fichier et de le remplacer une chaîne de caractères à l'intérieur d'un fichier.

Toute aide que vous donner serait très apprécié.

essayer avec gulp-remplacez ou peut-être la mieux adaptée serait l ' gulp-environnements

OriginalL'auteur Alan2 | 2016-03-27

25

Gorgée d'entrée du flux, n'toutes les transformations, et puis les flux de sortie. Enregistrement de fichiers temporaires entre les deux est autant que je sache, non-idiomatiques lors de l'utilisation de Gulp.

Au lieu de cela, ce que vous cherchez, est un streaming-le moyen de remplacer le contenu. Il serait assez facile d'écrire quelque chose de vous-même, ou vous pouvez utiliser un plugin existant. Pour moi, gulp-remplacez a plutôt bien fonctionné.

Si vous souhaitez faire le remplacement de tous les fichiers qu'il est facile de modifier votre tâche comme ceci:
```
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/'));
});
```
Vous pouvez également faire de gulp.src juste sur les fichiers que vous attendez le modèle, et de les diffuser séparément par le biais de gulp-replace, en la fusionnant avec un gulp.src flux de toutes les autres fichiers par la suite.

OriginalL'auteur Jeroen

Vous pouvez également utiliser le module gulp-chaîne-remplacer qui gère avec la regex, les cordes ou les même fonctions.

Exemple:

Regex:

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

Chaîne:

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

Fonction:

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

OriginalL'auteur Tomasz Czechowski

Je pense que la plus bonne solution est d'utiliser le gulp-prétraiter module. Il va effectuer les mesures dont vous avez besoin, en fonction de la variable PRODUCTION, définie ou non défini lors de la compilation.

Code Source:

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

C'est la meilleure solution car il permet de contrôler les modifications apportées au cours de la phase de construction.

OriginalL'auteur ollazarev

1

Là, j'ai une gestion des versions spécifiques, par exemple pour votre référence.
disons que vous disposez de la version.fichier ts et il contient la version du code à l'intérieur. Maintenant, vous pouvez faire comme suit:
```
gulp.task ('version_up', function () {
    gulp.src (["./version.ts"])
        .pipe (replace (/(\d+)\.(\d+)(?:\.(\d+))?(?:\-(\w+))?/, process.env.VERSION))
        .pipe (gulp.dest ('./'))
});
```
ci-dessus regex fonctionne pour beaucoup de situation sur toute version classique formats.

OriginalL'auteur GFxJamal

Vous devez vous connecter pour publier un commentaire.