Gulp broken browser pipe
I'm trying to work with a browser (with a stream) but it doesn't work in the context of a channel. Sass compiles correctly, then nothing happens. My code looks like this:
gulp.task('sass', function () {
gulp.src('../css/source/*.scss')
.on('error', function (err) {
notify.onError({
title: "Gulp",
subtitle: "Failure!",
message: "<%= error.message %>",
sound: "Beep"
})(err);
this.emit('end');
})
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write())
.pipe(concat('build.css'))
.pipe(gulp.dest('../css/build/dev'))
.pipe(browserSync.reload({stream:true}))
.pipe(csso())
.pipe(gulp.dest('../css/build/min'));
});
gulp.task('default', ['browser-sync'], function(){
gulp.watch('../css/source/*.scss', ['sass']);
});
In my terminal, it seems to register it:
[BS] 1 file changed (build.css)
[BS] File changed: ../css/build/dev/build.css
The only way to get a reboot is to add it to the view task:
gulp.watch("../css/build/dev/*.css", browserSync.reload);
... but with this method, I cannot turn on the stream as it does not accept a function. I have also tried browserSync.stream () as per the current docs to no avail.
Here's the browsersync task if it helps:
gulp.task('browser-sync', ['sass'], function() {
browserSync.init({
proxy: 'local.test.com',
host: '10.0.1.40'
});
});
Please, help!
source to share
Remove pipe to browserSync
in the task sass
and add the key files
to browserSync.init()
:
browserSync.init({
...
files: ['../css/**/*.css'],
...
});
In the above setup, you need neither gulp.watch()
(to run tasks based on file changes) nor a gulp task that depends on browserSync
. Just run it gulp browser-sync
.
Note that this observes the CSS directly to avoid race conditions between changes scss
and browserSync
.
source to share