Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 832
Alan2 Avatar asked Mar 27 '16 04:03

Alan2


People also ask

What is Gulp Gulpfile?

Gulpfile explained A gulpfile is a file in your project directory titled gulpfile. js (or capitalized as Gulpfile. js , like Makefile), that automatically loads when you run the gulp command.

What is Gulp Useref?

Parse build blocks in HTML files to replace references to non-optimized scripts or stylesheets with useref. Inspired by the grunt plugin grunt-useref. It can handle file concatenation but not minification. Files are then passed down the stream.

What is Gulp used for in angular?

Gulp is a task runner that allows you to define a series repeatable tasks that can be run any time you need. You can automate boring things like the minification and uglification of your javascript or whatever else you do in order to make your code production ready.


1 Answers

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.

like image 152
Jeroen Avatar answered Sep 23 '22 02:09

Jeroen