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).
[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?
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:
or both:
.. or use minified version in page.