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. :)
Comments
Post a Comment