Why does Gulp fail to automatically re-process my

问题:

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
    }))
});

回答1:

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]);

回答2:

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.

回答3:

Your gulp.watch for js changes does not actually call your 'js' task. That is why you have to rerun the 'watch' task to see any changes.

gulp.watch('../assets/scripts/*.js', browserSync.reload);

It just reloads the browser but doesn't call the 'js' task. Change to:

gulp.watch('../assets/scripts/*.js', ['js']);

and

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 }));
});

回答4:

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)
});

回答5:

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.

回答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.

回答7:

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