How can I use gulp to replace a string in a file?

Question

I am using gulp to uglify and make ready my javascript files for production. What I have is this 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/'));
});

What I need to do is to replace the string:

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

with

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

In the file 'temp/js/app/appConstant.js',

I'm looking for some suggestions. For example perhaps I should make a copy of the appConstant.js file, change that (not sure how) and include appConstantEdited.js in the js.src?

But I am not sure with gulp how to make a copy of a file and replace a string inside a file.

Any help you give would be much appreciated.

Answer 1

Gulp streams input, does all transformations, and then streams output. Saving temporary files in between is AFAIK non-idiomatic when using Gulp.

Instead, what you're looking for, is a streaming-way of replacing content. It would be moderately easy to write something yourself, or you could use an existing plugin. For me, gulp-replace has worked quite well.

If you want to do the replacement in all files it's easy to change your task like this:

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

You could also do gulp.src just on the files you expect the pattern to be in, and stream them seperately through gulp-replace, merging it with a gulp.src stream of all the other files afterwards.

Answer 2

You may also use module gulp-string-replace which manages with regex, strings or even functions.

Example:

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

String:

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

Function:

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

I think that the most correct solution is to use the gulp-preprocess module. It will perform the actions you need, depending on the variable PRODUCTION, defined or not defined during the build.

Source code:

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

This is the best solution because it allows you to control the changes that are made during the build phase.

Answer 4

There I have a versioning specific example for your reference. let say you have version.ts file and it contains the version code inside it. You now can do as the follows:

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

the above regex works for many situation on any conventional version formats.