Has anyone managed to get gulp browsersync or livereload to work with Local version 2.1.1 (update added ‘connect to flywheel’). In my case, the gulp tasks are running fine, but the browser does not reload in the watch task. It’s driving me nuts. Please help!
Related to this thread, inactive since Sept 17th
Hi Mark,
Are you using the proxy functionality with Browsersync?
Hi Clay,
Yes, I have it set up with the proxy functionality pointing to the Local url. I have also tried a .local url and a .dev url.
Neither of them work.
Maybe it has something to do with the paths in the watch tasks?
Any insight?
Thanks,
Mark
It might.
Can you share the relevant Browsersync code that’s in your gulp.js file?
Here’s my gulp file:
var projectURL = 'http://custom.dev'; // Local project URL of your already running WordPress site. Could be something like local.dev or localhost:8888.
// Style related.
var styleSRC = 'scss/style.scss'; // Path to main .scss file.
var styleDestination = ''; // Path to place the compiled CSS file.
// Watch files paths.
var styleWatchFiles = 'scss/**/*.scss'; // Path to all *.scss files inside css folder and inside them.
var vendorJSWatchFiles = 'js/vendor/*.js'; // Path to all vendor JS files.
var customJSWatchFiles = 'js/*.js'; // Path to all custom JS files.
var projectPHPWatchFiles = '*.php'; // Path to all PHP files.
const AUTOPREFIXER_BROWSERS = [
'last 2 version',
'> 1%',
'ie >= 9',
'ie_mob >= 10',
'ff >= 30',
'chrome >= 34',
'safari >= 7',
'opera >= 23',
'ios >= 7',
'android >= 4',
'bb >= 10'
];
// Load plugins
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var browserSync = require('browser-sync').create();
// var imagemin = require('gulp-imagemin');
// var pug = require('gulp-pug');
// var useref = require('gulp-useref');
// var gulpIf = require('gulp-if');
// var cache = require('gulp-cache');
// var del = require('del');
// var runSequence = require('run-sequence');
// var cssnano = require('gulp-cssnano');
// var uglify = require('gulp-uglify');
var livereload = require('gulp-livereload');
/**
* Task: `browser-sync`
*/
gulp.task( 'browser-sync', function() {
browserSync.init( {
proxy: projectURL,
open: true,
injectChanges: true,
// Use a specific port (instead of the one auto-detected by Browsersync).
// port: 7000,
watchOptions: {
debounceDelay: 1000 // This introduces a small delay when watching for file change events to avoid triggering too many reloads
}
} );
});
/**
* Task: `styles`
*/
gulp.task('styles', function () {
gulp.src( styleSRC )
.pipe( sourcemaps.init() )
.pipe( sass( {
errLogToConsole: true,
outputStyle: 'compact',
precision: 10
} ) )
.on('error', console.error.bind(console))
.pipe( sourcemaps.write( { includeContent: false } ) )
.pipe( sourcemaps.init( { loadMaps: true } ) )
.pipe( autoprefixer( AUTOPREFIXER_BROWSERS ) )
.pipe( sourcemaps.write ( styleDestination ) )
.pipe( gulp.dest( styleDestination ) )
.pipe( browserSync.stream() ) // Reloads style.css if that is enqueued.
});
/**
* Watch Tasks
*
* Watches for file changes and runs specific tasks
*/
gulp.task( 'default', ['styles', 'browser-sync'], function () {
gulp.watch( projectPHPWatchFiles, reload ); // Reload on PHP file changes.
gulp.watch( styleWatchFiles, [ 'styles', reload ] ); // Reload on SCSS file changes.
gulp.watch( vendorJSWatchFiles, reload ); // Reload on vendorsJs file changes.
gulp.watch( customJSWatchFiles, reload ); // Reload on customJS file changes.
}); ~~~~Hi @marksuarez,
may I ask if the tasks work as expected when being run independently? For example, if you run gulp styles are the styles correctly processed and copied to styleDesitnation and show up when you manually refresh http://custom.dev?
Are you using the browsersync url for development? When my proxy points to http://philipp.dev I have to use http://127.0.0.1:3000 (this url gets outputted by gulp in the console) in order to get browsersync functionality.
Hi @philtim,
Yes, the tasks work independently and the changes are reflected when i manually refresh.
I am using the Local URL (‘http://custom.dev’).
Browsersync outputs these in console, but if i try to use them, they do not load:
Access URLs:
Local: http://localhost:3000
External: http://192.168.0.13:3000
UI: http://localhost:3001
UI External: http://192.168.0.13:3001
Hi @marksuarez,
I’ve created a small prototype to see where things go wrong. Seems that your gulpfile.js is not working correctly. Following findings:
There is no reload task, hence your browser doesn’t show anything other than a blank page. That got me thinking and I did a very brief rewrite of your gulpfile.js and concentrated on the styles only. As the saying goes: It works on my machine (-:
var projectURL = 'http://playground.local'; // Local project URL of your already running WordPress site. Could be something like local.dev or localhost:8888.
var styleSRC = 'scss/style.scss'; // Path to main .scss file.
var styleDestination = ''; // Path to place the compiled CSS file.
var jsSRC = 'js/vendor/*.js'; // Path to all vendor JS files.
var jsDestination = 'js/vendor/'
// Watch files paths.
var styleWatchFiles = 'scss/**/*.scss'; // Path to all *.scss files inside css folder and inside them.
// Load plugins
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var browserSync = require('browser-sync').create();
gulp.task('styles', function () {
return gulp.src(styleSRC)
.pipe(sass({
errLogToConsole: true,
outputStyle: 'compact',
precision: 10
}))
.on('error', console.error.bind(console))
.pipe(gulp.dest(styleDestination))
.pipe(browserSync.stream({match: '**/*.css'})) // Reloads style.css if that is enqueued.
});
gulp.task('js-stuff', function () {
// HINT: here you would place all of your js related tasks, e.g. minification
return gulp.src(jsSRC)
.pipe(gulp.dest(jsDestination));
});
gulp.task('reload-js', ['js-stuff'], function (done) {
browserSync.reload();
done();
});
gulp.task('watch', function () {
gulp.watch(styleWatchFiles, ['styles']); // Reload on SCSS file changes.
gulp.watch(['src/js/**/*'], ['reload-js']);
});
gulp.task('default', [
'styles',
'watch'
], function () {
browserSync.init({
proxy: projectURL,
open: true
});
});
Maybe that helps in debugging the error on your side.
Hi @philtim,
I used your gulpfile and it works now!
Thanks so much for the help. It was definitely to do with that reload task.
Cheers!
Hey, folks!
Late to the party here — developer of WPGulp (I think it’s the most popular gulp utility for WordPress). Take a look and use it. BrowserSync works just fine with local and WPGulp.
Let me know of you have any questions. 
Hi Mark, just curious, does this setup work if you go to an internal page and make changes to your css or php files? I’m using an automation setup that works only in the front-page.php file. Thank you.