javascript - Gulp browser-sync only works once -

i'm trying out gulp on 1 of projects , wanted run used grunt watch. meaning, has watch less files , js files, lint, merge, compile , refresh browser once done.

i managed make work gulp-browser-sync reason works once. change .less file , browser reloads. then, second change, compile no reload happens.

here's log:

[bs] serving files from: ./ [09:47:26] starting 'css-clean'... [09:47:26] finished 'css-clean' after 16 ms [09:47:26] starting 'styles'... [bs] 1 file changed (styles.min.css) [09:47:27] finished 'styles' after 624 ms [09:47:27] starting 'styles-watch'... [bs] reloading browsers... 

and when hit save second time:

[09:47:31] starting 'css-clean'... [09:47:31] finished 'css-clean' after 3.39 ms [09:47:31] starting 'styles'... [bs] 1 file changed (styles.min.css) [09:47:32] finished 'styles' after 362 ms 

as js, works time. no issues whatsoever, after styles task done, js changes still triggering reload properly. styles has issues.

here's gulpfile.js

var gulp = require('gulp'),     autoprefixer = require('gulp-autoprefixer'),     less = require('gulp-less'),     minifycss = require('gulp-minify-css'),     concat = require('gulp-concat'),     jshint = require('gulp-jshint'),     uglify = require('gulp-uglify'),     rename = require('gulp-rename'),     notify = require('gulp-notify'),     path = require('path'),     streamqueue = require('streamqueue'),     clean = require('gulp-clean'),     browsersync = require('browser-sync').create(),     reload = browsersync.reload;   // clean css folder gulp.task('css-clean', function () {     return gulp.src(['dist/css'], {read: false})         .pipe(clean()); });  // clean css folder gulp.task('js-clean', function () {     return gulp.src(['dist/js'], {read: false})         .pipe(clean()); });   // generate css styles, clean before hand gulp.task('styles', ['css-clean'], function() {   return streamqueue({ objectmode: true },             gulp.src(['./bower_components/uikit/less/uikit.less']),             gulp.src(['./src/less/main.less'])         )     .pipe(concat('styles.less'))     .pipe(less({       paths: [ path.join(__dirname, 'less', 'includes') ]     }))     .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))     .pipe(gulp.dest('dist/css'))     .pipe(rename({suffix: '.min'}))     .pipe(minifycss())     .pipe(gulp.dest('dist/css'))     .pipe(browsersync.reload({stream:true})); });  // create task ensures `styles` task complete before // reloading browsers gulp.task('styles-watch', ['styles'], browsersync.reload);    // lint task gulp.task('lint', function() {     return gulp.src('src/js/*.js')         .pipe(jshint())         .pipe(jshint.reporter('default')); });   // generate scripts, clean before hand gulp.task('scripts', ['js-clean', 'lint'], function() {   return streamqueue({ objectmode: true },             gulp.src(['./bower_components/jquery/dist/jquery.js']),             gulp.src(['./bower_components/modernizer/modernizr.js']),             gulp.src(['./bower_components/uikit/js/uikit.js']),             gulp.src(['./src/js/plugin.js']),             gulp.src(['./src/js/main.js'])         )     .pipe(concat('scripts.js'))     .pipe(gulp.dest('dist/js'))     .pipe(rename({suffix: '.min'}))     .pipe(uglify())     .pipe(gulp.dest('dist/js'))     .pipe(browsersync.reload({stream:true})); });  // create task ensures `scripts` task complete before // reloading browsers gulp.task('scripts-watch', ['scripts'], browsersync.reload);   // lint task gulp.task('alldone', ['scripts'], function() {     return gulp.src('src/js/*.js')                .pipe(notify({ message: 'gulp tasks completed!!' })); });   // static server gulp.task('browsersync', function() {     browsersync.init({         server: {             basedir: "./"         }     });      gulp.watch("src/less/*.less", ['styles-watch']);     gulp.watch('src/js/*.js', ['lint', 'scripts-watch']);     gulp.watch("*.html").on('change', reload); });   // default task gulp.task('default', ['css-clean', 'js-clean', 'styles', 'lint', 'scripts', 'alldone']);  // build task gulp.task('build',   ['css-clean', 'js-clean', 'styles', 'lint', 'scripts', 'alldone']); 

thanks help!

how directly use

.pipe(browsersync.stream()) 

i once had same problem while changing '.jade' files reloaded once. wrapped browsersync.reload in anonymous function like

gulp.task('templates-watch', ['templates'], function() {     browsersync.reload(); }); 

it works me. don't know if there special browsersync.reload. how have try. :)