i'm trying figure out how use browser sync in conjunction gulp , less browser automatically update upon changes in less files after compilation. i've got right causing appears reload in system message "connected browser sync" i'm not seeing changes occur in browser. on full manual reload cache disabled see expected changes, css / less task seems working partially i'm missing on browser sync.
oh, i'm using @import statements in main .less file pull in less files each individual module. time , help!
gulp.task('less', function(){ return gulp.src(basepath + 'styles/emma.less') .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(less()) .pipe(autoprefixer({ browsers: ['last 2 versions'] })) .pipe(minifycss()) .pipe(sourcemaps.write('./')) .pipe(filesize()) .pipe(gulp.dest( paths.dest + '/css' )) .pipe(reload({stream: true})); }); gulp.task('browser-sync', function() { browsersync({ proxy: 'localhost:8080' }); }); //dev task compile things on fly gulp.task('dev', ['browser-sync'], function(){ gulp.watch(paths.scripts, ['scripts']); gulp.watch(paths.less, ['less']); gulp.watch(paths.templates, ['templates']); });
a way make browsersync work way have new listener on generated files. compile less css,
gulp.task('less', function(){ return gulp.src(basepath + 'styles/emma.less') .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(less()) .pipe(autoprefixer({ browsers: ['last 2 versions'] })) .pipe(minifycss()) .pipe(sourcemaps.write('./')) .pipe(filesize()) .pipe(gulp.dest( paths.dest + '/css' )); }); and put file watcher onto results, triggering reload:
gulp.task('dev', ['browser-sync'], function(){ gulp.watch(paths.less, ['less']); gulp.watch(paths.dest + '/css/**/*.css', reload); }); one reason original code won't work might of lost reference source files once they're compiled (that's nothing more assumption, though)
