node.js - browser sync reloading injecting works, but reloads after -
it seems there im missing - im trying css injection working on project.
the server proxy works file watcher injection works, page reloads half second after...
im on mac osx 10.11.6 (15g1108) node v4.1.1
here gulpfile:
var gulp = require('gulp'); var browsersync = require('browser-sync').create(); var reload = browsersync.reload; var sass = require('gulp-sass'); var plumber = require('gulp-plumber'); var notify = require("gulp-notify"); var src = { scss: 'assets/scss/**', css: 'assets/css/', html: 'app/*.html' }; gulp.task('serve', ['sass'], function() { browsersync.init({ proxy: "intouch.local", open: false, reloadonrestart: false, injectchanges: true, }); gulp.watch(src.scss, ['sass']); }); gulp.task('sass', function() { var onerror = function(err) { notify.onerror({ title: "gulp", subtitle: "failure!", message: "error: <%= error.message %>", sound: "beep" })(err); this.emit('end'); }; return gulp.src(src.scss) .pipe(plumber({errorhandler: onerror})) .pipe(sass()) .pipe(gulp.dest(src.css)) // note: i've tried of these lines, same... // .pipe(reload({stream: true})) // .pipe(browsersync.stream()) .pipe(browsersync.reload({ stream: true })) .pipe(notify({ title: 'gulp', subtitle: 'success', message: 'sass task', sound: "pop" })); }); gulp.task('default', ['serve']);
adjust glob sass files want compile match .scss
(or .sass
) files:
e.g. in code example change assets/scss/**
assets/scss/**/*.scss
.
a broad glob can result in unexpected files (typically source maps) being passed down pipeline , browsersync's default behaviour when encounters modified files can't streamed reload page, hence successful injection css , hard reload files didn't expect / don't care about.
Comments
Post a Comment