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.
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With