BrowserSync reload doesn’t work (wordpress site)

I’m having problems getting the live reload to work in BrowserSync. I have a wordpress site if it makes any difference. Everything but the live reload/injecting seems to work as it should. I have a Gulp setup for this that looks like this:

var gulp = require('gulp');
    var jshint = require('gulp-jshint');
    var concat = require('gulp-concat');
    var rename = require('gulp-rename');
    var uglify = require('gulp-uglify');
    var sass = require('gulp-sass');
    var autoprefixer = require('gulp-autoprefixer');
    var minifyCSS = require('gulp-minify-css');
    var del = require('del');
    var browserSync = require('browser-sync');
    var reload = browserSync.reload;

// ==== CONFIGURATION ==== //
// Project paths
var src         = 'assets/',
    dist        = 'dist/',
    bower       = src + 'bower_components/',
    css         = dist + 'css/',
    js          = dist + 'js/'
;


// Lint and minify our Javascript files
gulp.task('js-linting-compiling', ['clean'], function(){

    // read all of the files that are in script/lib with a .js extension
    return gulp.src('assets/js/*.js')
        // run their contents through jshint
        .pipe(jshint())
        // report any findings from jshint
        .pipe(jshint.reporter('default'))
        // concatenate all of the file contents into a file titled 'all.js'
        .pipe(concat('all.js'))
        // write that file to the dist/js directory
        .pipe(gulp.dest(js))
        // now rename the file in memory to 'all.min.js'
        .pipe(rename('all.min.js'))
        // run uglify (for minification) on 'all.min.js'
        .pipe(uglify())
        // write all.min.js to the dist/js file
        .pipe(gulp.dest(js));
});


// Compile SASS into CSS, autoprefix it and minify it
gulp.task('sass-to-css', ['clean'], function () {
    gulp.src('assets/sass/**/*.scss')
        .pipe(sass({errLogToConsole: true}))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest(css))
        .pipe(rename({ suffix: '_min' }))
        .pipe(minifyCSS({keepSpecialComments:0}))
        .pipe(gulp.dest(css))
        .pipe(reload({stream: true}));
});


// Clean our dist folder before we generate new content into it
gulp.task('clean', function (cb) {
  del([
    // here we use a globbing pattern to match everything inside the `dist` folder
    'dist/**',
  ], cb);
});


// ### Build
// `gulp build` - Run all the build tasks but don't clean up beforehand.
// Generally you should be running `gulp` instead of `gulp build`.
gulp.task('build', ['clean', 'sass-to-css', 'js-linting-compiling'], function() {
});


// ### Gulp
// `gulp` - Run a complete build. To compile for production run `gulp --production`.
gulp.task('default', ['clean'], function() {
  gulp.start('build');
});


// ### Watch
// `gulp watch` - Use BrowserSync to proxy your dev server and synchronize code
// changes across devices. Specify the hostname of your dev server at
// `manifest.config.devUrl`. When a modification is made to an asset, run the
// build step for that asset and inject the changes into the page.
// See: http://www.browsersync.io
gulp.task('watch', function() {
  browserSync({
    proxy: "local.project.dev",
    host: "localhost",
    notify: false,
  });
  gulp.watch(['assets/sass/**/*'], ['sass-to-css']);
  gulp.watch(['assets/js/**/*'], ['js-linting-compiling']);
  gulp.watch('**/*.php', function() {
    browserSync.reload();
  });
});

This is what the terminal shows when updating a *.scss file (running gulp watch).

Read More
[13] → gulp watch
[11:39:17] Using gulpfile ~/sites/VVV/www/local.project.dev/htdocs/app/themes/mytheme/gulpfile.js
[11:39:17] Starting 'watch'...
[11:39:19] Finished 'watch' after 1.4 s
[BS] Proxying: http://local.project.dev
[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.111:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.111:3001
 --------------------------------------
[11:40:10] Starting 'clean'...
[11:40:10] Finished 'clean' after 6.12 ms
[11:40:10] Starting 'sass-to-css'...
[11:40:10] Finished 'sass-to-css' after 6.54 ms
[BS] 1 file changed (style_min.css)

Any ideas?

Related posts

Leave a Reply

1 comment

  1. You’re telling browser-sync to reload only your minified css version. You probably use non-minified version in your page and that causes the problem.

    So either reload just non-minified:

    .pipe(gulp.dest(css))
    .pipe(reload({stream: true}))
    .pipe(rename({ suffix: '_min' }))
    .pipe(minifyCSS({keepSpecialComments:0}))
    .pipe(gulp.dest(css));
    

    or both:

    .pipe(gulp.dest(css))
    .pipe(reload({stream: true}))
    .pipe(rename({ suffix: '_min' }))
    .pipe(minifyCSS({keepSpecialComments:0}))
    .pipe(gulp.dest(css))
    .pipe(reload({stream: true}));
    

    .. or use minified version in page.