Question

Let's say I want to replace the version number in a bunch of files, many of which live in subdirectories. I will pipe the files through gulp-replace to run the regex-replace function; but I will ultimately want to overwrite all the original files.

The task might look something like this:

gulp.src([
    './bower.json',
    './package.json',
    './docs/content/data.yml',
    /* ...and so on... */
  ])
  .pipe(replace(/* ...replacement... */))
  .pipe(gulp.dest(/* I DONT KNOW */);

So how can I end it so that each src file just overwrites itself, at its original location? Is there something I can pass to gulp.dest() that will do this?

Was it helpful?

Solution

I can think of two solutions:

  1. Add an option for base to your gulp.src like so:

    gulp.src([...files...], {base: './'}).pipe(...)...
    

    This will tell gulp to preserve the entire relative path. Then pass './' into gulp.dest() to overwrite the original files. (Note: this is untested, you should make sure you have a backup in case it doesn't work.)

  2. Use functions. Gulp's just JavaScript, so you can do this:

    [...files...].forEach(function(file) {
        var path = require('path');
        gulp.src(file).pipe(rename(...)).pipe(gulp.dest(path.dirname(file)));
    }
    

    If you need to run these asynchronously, the first will be much easier, as you'll need to use something like event-stream.merge and map the streams into an array. It would look like

    var es = require('event-stream');
    
    ...
    
    var streams = [...files...].map(function(file) {
            // the same function from above, with a return
            return gulp.src(file) ...
        };
    return es.merge.apply(es, streams);
    

OTHER TIPS

Tell gulp to write to the base directory of the file in question, just like so:

    .pipe(
        gulp.dest(function(data){

            console.log("Writing to directory: " + data.base);
            return data.base;
        })
    )

(The data argument is a vinyl file object)

The advantage of this approach is that if your have files from multiple sources each nested at different levels of the file structure, this approach allows you to overwrite each file correctly. (As apposed to set one base directory in the upstream of your pipe chain)

if you are using gulp-rename, here's another workaround:

var rename = require('gulp-rename');

...

function copyFile(source, target){
  gulp.src(source)
  .pipe(rename(target))
  .pipe(gulp.dest("./"));
}

copyFile("src/js/app.js","dist/js/app.js");

and if you want source and target to be absolute paths,

var rename = require('gulp-rename');

...

function copyFile(source, target){
  gulp.src(source.replace(__dirname,"."))
  .pipe(rename(target.replace(__dirname,".")))
  .pipe(gulp.dest("./"));
}

copyFile("/Users/me/Documents/Sites/app/src/js/app.js","/Users/me/Documents/Sites/app/dist/js/app.js");

I am not sure why people complicate it but by just starting your Destination path with "./" does the job.

Say path is 'dist/css' Then you would use it like this .pipe(gulp.dest("./dist/css"));

That's it, I use this approach on everyone of my projects.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top