web-dev-qa-db-fra.com

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

J'utilise gulp pour uglifier et préparer mes fichiers javascript pour la production. Ce que j'ai c'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 cherche quelques suggestions. Par exemple, je devrais peut-être faire une copie du fichier appConstant.js, changer cela (je ne sais pas comment) et inclure appConstantEdited.js dans le js.src?

Mais je ne sais pas avec gulp comment faire une copie d'un fichier et remplacer une chaîne à l'intérieur d'un fichier.

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

javascriptgulpgulp-concatgulp-replace
21
Alan2

Gulp diffuse l'entrée, effectue toutes les transformations, puis diffuse la sortie. L'enregistrement de fichiers temporaires entre les deux est AFAIK non idiomatique lors de l'utilisation de Gulp.

Au lieu de cela, ce que vous recherchez, c'est un moyen de streaming pour remplacer le contenu. Il serait modérément facile d'écrire quelque chose vous-même, ou vous pourriez utiliser un plugin existant. Pour moi, gulp-replace a très bien fonctionné.

Si vous souhaitez effectuer le remplacement dans tous les fichiers, 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 gulp.src uniquement sur les fichiers dans lesquels vous vous attendez à ce que le modèle se trouve, et diffusez-les séparément via gulp-replace, en le fusionnant avec un gulp.src flux de tous les autres fichiers par la suite.

28
Jeroen

Vous pouvez également utiliser le module gulp-string-replace qui gère avec regex, des chaînes ou même des 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'))
});
8
Tomasz Czechowski

Je pense que la solution la plus correcte est d'utiliser le module gulp-preprocess . Il effectuera les actions dont vous avez besoin, en fonction de la variable PRODUCTION, définie ou non définie lors de la génération.

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

Il s'agit de la meilleure solution car elle vous permet de contrôler les modifications apportées pendant la phase de génération.

2
ollazarev

Là, j'ai un exemple spécifique de versioning pour votre référence. disons que vous avez le fichier version.ts et qu'il contient le code de version. Vous pouvez maintenant procéder comme suit:

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

l'expression rationnelle ci-dessus fonctionne pour de nombreuses situations sur tous les formats de version conventionnels.

1
GFxJamal