Browser-sync: Reloading page instead of injecting CSS after another task (Gulp)

Created on 8 Jul 2015 · 4Comments · Source: BrowserSync/browser-sync

Hi, I noticed a strange problem. After I run js task and then save CSS, it's reloading the whole page instead of just injecting the CSS, even if there is no such trigger in my gulpfile. (link to my gulpfile.js).

See the log, first CSS saving (task styles 1.67 s) goes OK, it just injects the CSS. After saving javascript (js task 13ms) it always reloads the browser after saving scss file:

I have double checked my gulpfile.js and have my doubts it's about that (unless you have suggestions?).

My package.json:

{
  "name": "project",
  "version": "1.0.0",
  "description": "powered by dudestack + devpackages",
  "author": "Digitoimisto Dude Oy ([email protected])",
  "devDependencies": {
    "browser-sync": "^2.7.13",
    "exec": "0.2.0",
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "2.3.1",
    "gulp-cache": "0.2.10",
    "gulp-changed": "^1.2.1",
    "gulp-concat": "2.6.0",
    "gulp-header": "1.2.2",
    "gulp-imagemin": "^2.3.0",
    "gulp-minify-css": "1.2.0",
    "gulp-newy": "^1.0.7",
    "gulp-notify": "^2.2.0",
    "gulp-pixrem": "^0.2.3",
    "gulp-sass": "^2.0.3",
    "gulp-sourcemaps": "^1.5.2",
    "gulp-uglify": "1.2.0",
    "gulp-util": "^3.0.6",
    "node-bourbon": "^4.2.3",
    "psi": "^1.0.6",
    "require-dir": "^0.3.0"
  },
  "dependencies": {
    "backbone": "~1.2.1",
    "jquery": "~2.1.4"
  }
}

Mac OS X 10.10.3 Yosemite
Google Chrome 43.0.2357.132 (64-bit)
Proxying jolliest-vagrant

A bug in browsersync, perhaps?

Source

ronilaukkarinen

Most helpful comment

The issue is here https://github.com/digitoimistodude/devpackages/blob/master/gulpfile.js#L198

gulp.task('watch', ['browsersync'], function() {

  gulp.watch(sassSrc, ['styles']);
  gulp.watch(imgSrc, ['images']);
  gulp.watch(jsSrc, ['js', browserSync.reload]); // no longer recommended

});

The problem being that browserSync.reload is not a gulp task therefor screws things internally for gulp's task runner.

The solution is to use an intermediate task that will run your js task & when it completes, call browserSync.reload. It would look something like...

// run the JS task followed by a reload
gulp.task('js-watch', ['js'], browserSync.reload);

gulp.task('watch', ['browsersync'], function() {
  gulp.watch(sassSrc, ['styles']);
  gulp.watch(imgSrc, ['images']);
  gulp.watch(jsSrc, ['js-watch']);
});

You'll also need to ensure you return the stream in your js task - this is so that gulp knows when you're done.

Both of those changes will also eliminate any race conditions that can occur should your js task be slow.

shakyShane on 8 Jul 2015

👍3

All 4 comments

The issue is here https://github.com/digitoimistodude/devpackages/blob/master/gulpfile.js#L198

gulp.task('watch', ['browsersync'], function() {

  gulp.watch(sassSrc, ['styles']);
  gulp.watch(imgSrc, ['images']);
  gulp.watch(jsSrc, ['js', browserSync.reload]); // no longer recommended

});

The problem being that browserSync.reload is not a gulp task therefor screws things internally for gulp's task runner.

The solution is to use an intermediate task that will run your js task & when it completes, call browserSync.reload. It would look something like...

// run the JS task followed by a reload
gulp.task('js-watch', ['js'], browserSync.reload);

gulp.task('watch', ['browsersync'], function() {
  gulp.watch(sassSrc, ['styles']);
  gulp.watch(imgSrc, ['images']);
  gulp.watch(jsSrc, ['js-watch']);
});

You'll also need to ensure you return the stream in your js task - this is so that gulp knows when you're done.

Both of those changes will also eliminate any race conditions that can occur should your js task be slow.

shakyShane on 8 Jul 2015

👍3

Oh, right. Didn't know you can't call it directly within watch. Another lesson learned, thanks a lot!

ronilaukkarinen on 8 Jul 2015

Anytime! this will be easier in gulp 4.x, whenever that lands

shakyShane on 8 Jul 2015

this must have changed as it worked prior to 1.8.2.

what changed?