EEXIST error when trying to overwrite an existing file in Gulp?

Question

I have a few tasks in my Gulpfile that I would like to run and either have their output replace or alter an existing file. For example, I want to run wiredep and have code replace the blocks inside index.html (which is the same file as the source) so basically I have the have the following:

gulp.task('bower', () => {
  return gulp.src('app/index.html')
    .pipe(wiredep())
    .pipe(gulp.dest('app/index.html')) // Have wiredep operate on the source 
})

But this creates an EEXIST error.

Similarly, I would like to run the stylus command, and pipe the output to a file that already exists (because it was previously run).

Do I have any choise but to run del each time? It seems like Gulp should be able to easily overwrite existing files but I can't figure out a simple way.

Answer 1

gulp.dest() expects a directory. You're passing it a file name.

What happens is that gulp tries to create the directory app/index.html, which it can't since there's already a file with that name.

All you need to do is pass app/ as the destination directory:

gulp.task('bower', () => {
  return gulp.src('app/index.html')
    .pipe(wiredep())
    .pipe(gulp.dest('app/'));
})

Answer 2

You should be able to use gulp.dest which has an option overwrite

options.overwrite Type: Boolean

Default: true

Specify if existing files with the same path should be overwritten or not.

Answer 3

It will be ok.

gulp.task('bower', () => {
  return gulp.src('app/index.html')
    .pipe(wiredep())
    .pipe(gulp.dest('app')) // Have wiredep operate on the source 
})