Why does Gulp fail to automatically re-process my

Question

In my gulpfile.js, JS changes automatically trigger both BrowserSync reload and my JS processing task. But for some reason, although the reload does work, my JS task fails to correctly process JS changes and create new JS file in dist/ folder. I have to restart Gulp for that. Why?

Gulpfile.js:

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var concat = require('gulp-concat');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');

gulp.task('sass', function() {
  return gulp.src('../assets/styles/**/*.scss')
  .pipe(sass())
  .pipe(gulp.dest('../dist/styles'))
  .pipe(browserSync.reload({
    stream: true
  }))
});

gulp.task('js', function() {
  return gulp.src(['../assets/scripts/*.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(gulp.dest('../dist/scripts'))
});

gulp.task('browserSync', function() {
  browserSync.init({
    proxy: 'http://127.0.0.1/my_site/new-front-page/',
  })
})

gulp.task('watch', ['sass', 'js', 'browserSync'], function() {
  gulp.watch('../assets/styles/**/*.scss',['sass']);
  gulp.watch('../**/**/*.php', browserSync.reload);
  gulp.watch('../assets/scripts/*.js', browserSync.reload);
  gulp.watch('../*.html', browserSync.reload);
});

EDIT:

Also tried the code below for the "js" task (see the 3 last lines compared to the code above), to no avail:

gulp.task('js', function() {
  return gulp.src(['../assets/scripts/*.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(gulp.dest('../dist/scripts'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

Answer 1

Try executing the js task like I have mentioned below

gulp.task('js', function() {
gulp.src(['../assets/scripts/*.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(gulp.dest('../dist/scripts'))
    .pipe(browserSync.reload({ stream:true }));
});

gulp.task('watch', function() {
watch(['../assets/scripts/*.js'], function() {
    gulp.start('js');
 });
});

gulp.task('default', ['js', 'watch']);

Writing this way helped me. Hope it works for you.

Answer 2

Modularize your code a bit. easy to make changes !

Your gulpfile.js

var build = require('./gulp/build'); gulp.task('build:dist', build.buildDist); gulp.task('build', gulp.series('build:dist'));

In your build.js inside gulp folder make a series of task that you want to perform var buildDev = gulp.series( clean, gulp.series( lint, injectDev, moveAndFlattenFonts, moveAndFlattenAdminFonts, moveJsonToApp ) ); var buildDist = gulp.series( buildDev, //move all the things gulp.parallel( moveHtml, moveIndexHtml, moveAdminHtml, moveBowerComponentImagesToDist, moveAdminComponentImagesToDist, moveImagesToDist, moveFontsToDist, moveIconsToDist, moveJsonToDist, moveServerConfigFiles, moveScriptsToDist, moveScriptsToAdminDist,
moveCssToDist, moveCssToAdminDist, moveAndTemplatifyHtml
), replaceRevisionedPaths, injectToIndexDist, injectToAdminDist ); and run gulp build:dist as a starting task

Answer 3

As mark mentioned in his answer, you should change your watch task. But, you should have:

gulp.watch('../assets/styles/**/*.scss',['sass', browserSync.reload]);
gulp.watch('../**/**/*.php', browserSync.reload);
gulp.watch('../assets/scripts/*.js', ['js', browserSync.reload]);
gulp.watch('../*.html', browserSync.reload);

When the styles and scripts change, we rerun the tasks (sass & js) and reload the page.

I tried your code with these changes and it worked. The answer is based on Google Web Starter Kit's gulpfile.babel.js which has:

gulp.watch(['app/scripts/**/*.js'], ['lint', 'scripts', reload]);

Answer 4

gulp.task('watch', ['sass' , 'js' , 'browserSync'], function() {
gulp.watch('../assets/styles/**/*.scss' , ['sass']);
gulp.watch('../**/**/*.php' , browserSync.reload);
gulp.watch('../assets/scripts/*.js' , browserSync.reload);
gulp.watch('../*.html', browserSync.reload);
}); 

`The array of tasks that need to be completed, before gulp runs watch, processes the array in reverse order. So browserSync runs first, then js and then sass. You just need to reverse the order to ['browserSync','js','sass']. That should solve the problem.

Answer 5

try end event:

gulp.task('js', function() {
  return gulp.src(['../assets/scripts/*.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(gulp.dest('../dist/scripts'))

    .on('end', browserSync.reload)
});

Answer 6

I would change the watch task as follow:

gulp.task('sass', function() {
  return gulp.src('../assets/styles/**/*.scss')
  .pipe(sass())
  .pipe(gulp.dest('../dist/styles'))
  .pipe(reload({stream: true}));
});

gulp.task('js', function() {
  return gulp.src(['../assets/scripts/*.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(gulp.dest('../dist/scripts'))
    .pipe(reload({stream: true}));
});

gulp.task('watch', ['sass', 'js'], function() {
  browserSync.init({
    proxy: 'http://127.0.0.1/my_site/new-front-page/',
  });

  gulp.watch('../assets/styles/**/*.scss',['sass']);
  gulp.watch('../**/**/*.php').on('change', browserSync.reload);
  gulp.watch('../assets/scripts/*.js', ['js']);
  gulp.watch('../*.html').on('change', browserSync.reload);
});

The problem is probably the way you're reloading.