Gulp: Gulp.js browser-sync not reloading my browser

[adolfojbarreto]

Gulp browser-sync is not reloading my browser. When I hit save on my project it builds everything fine. My browser blinks and says "Connected to Browser-sync" on the upper right hand corner. It does not load the changes though. When I manually hit refresh, on chrome, it will load the changes. I've been up and down the gulp file and can find nothing wrong. Any advice?

[marvinhagemeister]

Can you post your gulpfile? It's hard to debug your code without seeing it.

[adolfojbarreto]

Thank you, here it is:

var $ = require('gulp-load-plugins')();
var argv = require('yargs').argv;
var browser = require('browser-sync');
var gulp = require('gulp');
var panini = require('panini');
var rimraf = require('rimraf');
var sequence = require('run-sequence');
var sherpa = require('style-sherpa');

// Check for --production flag
var isProduction = !!(argv.production);

// Port to use for the development server.
var PORT = 8000;

// Browsers to target when prefixing CSS.
var COMPATIBILITY = ['last 2 versions', 'ie >= 9'];

// File paths to various assets are defined here.
var PATHS = {
assets: [
'src/assets//',
'!src/assets/{img,js,scss}//_'
],
sass: [
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src/'
],
javascript: [
'bower_components/jquery/dist/jquery.js',
'bower_components/what-input/what-input.js',
'bower_components/foundation-sites/js/foundation.core.js',
'bower_components/foundation-sites/js/foundation.util._.js',
// Paths to individual JS components defined below
'bower_components/foundation-sites/js/foundation.abide.js',
'bower_components/foundation-sites/js/foundation.accordion.js',
'bower_components/foundation-sites/js/foundation.accordionMenu.js',
'bower_components/foundation-sites/js/foundation.drilldown.js',
'bower_components/foundation-sites/js/foundation.dropdown.js',
'bower_components/foundation-sites/js/foundation.dropdownMenu.js',
'bower_components/foundation-sites/js/foundation.equalizer.js',
'bower_components/foundation-sites/js/foundation.interchange.js',
'bower_components/foundation-sites/js/foundation.magellan.js',
'bower_components/foundation-sites/js/foundation.offcanvas.js',
'bower_components/foundation-sites/js/foundation.orbit.js',
'bower_components/foundation-sites/js/foundation.responsiveMenu.js',
'bower_components/foundation-sites/js/foundation.responsiveToggle.js',
'bower_components/foundation-sites/js/foundation.reveal.js',
'bower_components/foundation-sites/js/foundation.slider.js',
'bower_components/foundation-sites/js/foundation.sticky.js',
'bower_components/foundation-sites/js/foundation.tabs.js',
'bower_components/foundation-sites/js/foundation.toggler.js',
'bower_components/foundation-sites/js/foundation.tooltip.js',
'src/assets/js/*/!(app).js',
'src/assets/js/app.js'
]
};

// Delete the "dist" folder
// This happens every time a build starts
gulp.task('clean', function(done) {
rimraf('dist', done);
});

// Browser Sync wrapper task
// allows for proper injection of css files
gulp.task('reload', function(cb) {
browser.reload();
cb();
});

// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
gulp.task('copy', function() {
return gulp.src(PATHS.assets)
.pipe(gulp.dest('dist/assets'));
});

// Copy page templates into finished HTML files
gulp.task('pages', function() {
return gulp.src('src/pages/*_/_.{html,hbs,handlebars}')
.pipe(panini({
root: 'src/pages/',
layouts: 'src/layouts/',
partials: 'src/partials/',
data: 'src/data/',
helpers: 'src/helpers/'
}))
.pipe(gulp.dest('dist'));
});

gulp.task('pages:reset', function(cb) {
panini.refresh();
gulp.run('pages', cb);
});

gulp.task('styleguide', function(cb) {
sherpa('src/styleguide/index.md', {
output: 'dist/styleguide.html',
template: 'src/styleguide/template.html'
}, cb);
});

// Compile Sass into CSS
// In production, the CSS is compressed
gulp.task('sass', function() {
var uncss = $.if(isProduction, $.uncss({
html: ['src/*_/_.html'],
ignore: [
new RegExp('^meta.._'),
new RegExp('^.is-._')
]
}));

var minifycss = $.if(isProduction, $.minifyCss());

return gulp.src('src/assets/scss/app.scss')
.pipe($.sourcemaps.init())
.pipe($.sass({
includePaths: PATHS.sass
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: COMPATIBILITY
}))
.pipe(uncss)
.pipe(minifycss)
.pipe($.if(!isProduction, $.sourcemaps.write()))
.pipe(gulp.dest('dist/assets/css'))
.pipe(browser.reload({stream: true}));
});

// Combine JavaScript into one file
// In production, the file is minified
gulp.task('javascript', function() {
var uglify = $.if(isProduction, $.uglify()
.on('error', function (e) {
console.log(e);
}));

return gulp.src(PATHS.javascript)
.pipe($.sourcemaps.init())
.pipe($.concat('app.js'))
.pipe(uglify)
.pipe($.if(!isProduction, $.sourcemaps.write()))
.pipe(gulp.dest('dist/assets/js'));
});

// Copy images to the "dist" folder
// In production, the images are compressed
gulp.task('images', function() {
var imagemin = $.if(isProduction, $.imagemin({
progressive: true
}));

return gulp.src('src/assets/img/*_/_')
.pipe(imagemin)
.pipe(gulp.dest('dist/assets/img'));
});

// Build the "dist" folder by running all of the above tasks
gulp.task('build', function(done) {
sequence('clean', ['pages', 'sass', 'javascript', 'images', 'copy'], 'styleguide', done);
});

// Start a server with LiveReload to preview the site in
gulp.task('server', ['build'], function() {
browser.init({
server: 'dist', port: PORT
});
});

// Build the site, run the server, and watch for file changes
gulp.task('default', ['build', 'server'], function() {
gulp.watch(PATHS.assets, ['copy', 'reload']);
gulp.watch(['src/pages//.html'], ['pages', 'reload']);
gulp.watch(['src/{layouts,partials}//_.html'], ['pages:reset', 'reload']);
gulp.watch(['src/assets/scss/__/_.scss'], ['sass']);
gulp.watch(['src/assets/js//.js'], ['javascript', 'reload']);
gulp.watch(['src/assets/img//_'], ['images', 'reload']);
gulp.watch(['src/styleguide/_*'], ['styleguide', 'reload']);
});

[hstarorg]

You can change your server task to this:

browser({server: 'dist', port: PORT});

[adolfojbarreto]

Thank you hstarorg but it did not work.

gulp.task('server', ['build'], function() {
browser({
server: 'dist', port: PORT
});
});

Was that what you were referring to?

[callumacrae]

This isn't a gulp issue! Please seek support either with the maintainers of browser-sync, or on stackoverflow.

[adolfojbarreto]

Ok thank you callumacrae, I appreciate your help.

[hstarorg]

@adolfobarreto75

var browserSync = require('browser-sync')
var runSequence = require('run-sequence')

gulp.task('serve', function () {
  return browserSync({
    server: {
      baseDir: './dist/',
      //middleware: [historyFallback()]
    },
    port: 7410
  });
});


gulp.task('watch', function () {
  return gulp.watch(['./src/**/*.*'], ['server-reload']);
});

gulp.task('server-reload', function (callback) {
  return runSequence(['build'], ['bs-reload'], callback);
});

gulp.task('bs-reload', function () {
  return browserSync.reload();
});

Give you some codes, you can try it.

[adolfojbarreto]

Thank you hstarorg ill try them tonight. I appreciate your help.

[hstarorg]

@adolfobarreto75 No thanks,waiting for gulp 4.0.

[BryanBarrera]

@hstarorg - This is 2 years old but still useful. This answer helped me.

[hstarorg]

@BryanBarrera That's very nice, The gulp@next is very good now.

[AshantiCode]

Thank you, this one worked for me to immediately see changes even when I undo something that I added just before in my css files .

gulp.task('watch', function () {
  return gulp.watch(['./src/**/*.*'], ['server-reload']);
});