I am attempting to refactor some legacy code I wrote 2 years ago. A gulpfile.js file to be precise.

It seems like the problem is here:

// gulp.task('default', ['browserify', 'copy'], function() {
//   return gulp.watch('src/**/*.*', ['browserify', 'copy']);
// });

I mented it out and replaced it with this:

gulp.task('default', gulp.series('browserify', 'copy'), function() {
  return gulp.watch('src/**/*.*', ['browserify', 'copy']);
});

Not good enough. The whole file looks like this:

var gulp = require('gulp');
var browserify = require('browserify');
var reactify = require('reactify'); // Converts jsx to js
var source = require('vinyl-source-stream'); // Converts string to a stream

gulp.task('browserify', function() {
  browserify('./src/js/main.js')
    .transform('reactify')
    .bundle()
    .pipe(source('main.js'))
    .pipe(gulp.dest('dist/js'));
});

gulp.task('copy', function() {
  gulp.src('src/index.html').pipe(gulp.dest('dist'));
  gulp.src('src/css/*.*').pipe(gulp.dest('dist/css'));
  gulp.src('src/images/*.*').pipe(gulp.dest('dist/images'));
  gulp.src('src/js/vendors/*.*').pipe(gulp.dest('dist/js'));
});

// gulp.task('default', ['browserify', 'copy'], function() {
//   return gulp.watch('src/**/*.*', ['browserify', 'copy']);
// });

gulp.task('default', gulp.series('browserify', 'copy'), function() {
  return gulp.watch('src/**/*.*', ['browserify', 'copy']);
});

I have read through some of the getting started documentation, but what I have read thus far has not helped me refactor this.

I am attempting to refactor some legacy code I wrote 2 years ago. A gulpfile.js file to be precise.

It seems like the problem is here:

// gulp.task('default', ['browserify', 'copy'], function() {
//   return gulp.watch('src/**/*.*', ['browserify', 'copy']);
// });

I mented it out and replaced it with this:

gulp.task('default', gulp.series('browserify', 'copy'), function() {
  return gulp.watch('src/**/*.*', ['browserify', 'copy']);
});

Not good enough. The whole file looks like this:

var gulp = require('gulp');
var browserify = require('browserify');
var reactify = require('reactify'); // Converts jsx to js
var source = require('vinyl-source-stream'); // Converts string to a stream

gulp.task('browserify', function() {
  browserify('./src/js/main.js')
    .transform('reactify')
    .bundle()
    .pipe(source('main.js'))
    .pipe(gulp.dest('dist/js'));
});

gulp.task('copy', function() {
  gulp.src('src/index.html').pipe(gulp.dest('dist'));
  gulp.src('src/css/*.*').pipe(gulp.dest('dist/css'));
  gulp.src('src/images/*.*').pipe(gulp.dest('dist/images'));
  gulp.src('src/js/vendors/*.*').pipe(gulp.dest('dist/js'));
});

// gulp.task('default', ['browserify', 'copy'], function() {
//   return gulp.watch('src/**/*.*', ['browserify', 'copy']);
// });

gulp.task('default', gulp.series('browserify', 'copy'), function() {
  return gulp.watch('src/**/*.*', ['browserify', 'copy']);
});

I have read through some of the getting started documentation, but what I have read thus far has not helped me refactor this.

• javascript
• gulp

2 Answers 2

With Gulp 4.0 the way you run tasks in series has got changed. You can read and get what you want using below link https://github./gulpjs/gulp/blob/master/docs/recipes/running-tasks-in-series.md.

This issue faced me because of the version of gulp I installed using npm i gulp to solve this quickly, downgrade to that gulp version you used before 2 years and everything will work fine.