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.