66

I'm extremely new to Gulp. I'm basically trying to watch for a modified JavaScript file, and then make a new copy of it with a new name. (eventually there'll be some processing on it, but Rome wasn't built in a day).

My (naive) attempt is this:

gulp.task('default', function() {

    return gulp.watch('../**/**.js', function(obj){
        gulp.src(obj.path)
            .pipe(gulp.dest('foobar.js'));
    });

});

This takes the modified file and successfully copies it into a folder now called foobar.js. Is there anything simple I can replace gulp.dest('foobar.js') with that will simply copy and rename the src file in place?

EDIT

By copy in place, I mean I want to take the modified file, and make a copy of it right where it currently is with a new name. The equivalent of clicking the file (in windows) and hitting control-c control-v, then renaming the resulting file.

Adam Rackis
  • 82,527
  • 56
  • 270
  • 393

3 Answers3

96

I'm not 100% certain what you mean by

copy and rename ... in place

But, based on your current code, if you simply wish to:

  1. Watch all .js files in the parent directory and
  2. Copy them to the cwd (current working directory) and
  3. Name all copies, regardless of source file, the same thing

Then you could use gulp-rename to do just that:

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

gulp.task('default', function() {
  return gulp.watch('../**/**.js', function(obj) {
    gulp.src(obj.path)
      .pipe(rename('newFileName.js'))
      .pipe(gulp.dest('.'));
  });
});

In this case, the output filename is newFileName.js

In order to use the module, you'll need to install the gulp-rename package with npm (ie: npm install gulp-rename).

More examples are available on the package details page on npm @ https://www.npmjs.com/package/gulp-rename#usage

knksmith57
  • 1,096
  • 8
  • 6
  • 1
    +1 - thank you very much. I apologize for the unclear question. I threw an edit on my question to hopefully clarify. – Adam Rackis Feb 18 '15 at 21:34
  • @AdamRackis, using your updated code, I am unable to reproduce the issue. Are you **100%** positive that the change isn't happening in the copied file instead of the source file? If you `console.log(obj.path)` before your `gulp.src` line, can you verify that it is the **source file** that is triggering the watch task callback? – knksmith57 Feb 18 '15 at 21:41
  • Ah - thinking about it the file change is overwriting the previous modified file which is triggering a new file. Thanks so much for the help. I'll get you some more upvotes :) – Adam Rackis Feb 18 '15 at 21:46
  • Nice to see that after 2 years on this site you finally found a question to answer! Thanks again :) – Adam Rackis Feb 19 '15 at 14:26
  • 1
    Is there no way to do that without installing a new package? – stallingOne Mar 28 '18 at 08:33
14

It wasn't pretty getting there, but in the end it appears this is what I want (with some ES6 transpiling in the middle).

The key appears to be the options object with a base property in the call to src. That seems to be what's needed to maintain the path of the current file in the call to dest. 

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

gulp.task('default', function() {
    return gulp.watch('../**/$**.js', function(obj){
        if (obj.type === 'changed') {
            gulp.src(obj.path, { base: './' })
                .pipe(babel())
                .pipe(rename(function (path) {
                    path.basename = path.basename.replace('$', '');
                }))
                .pipe(gulp.dest(''));
        }
    });
});
Adam Rackis
  • 82,527
  • 56
  • 270
  • 393
-3

20 lines of code to do 'cp file1 file2'

That's elegance.

Harry Slaughter
  • 73
  • 8