BrowserSync.stream() not working, browserSync.reload() throws error

Question

This is my Gulp file:

var gulp = require('gulp'),
    watch = require('gulp-watch'),
    postcss = require('gulp-postcss'),
    autoprefixer = require('autoprefixer'),
    simplevars = require('postcss-simple-vars'),
    nested = require('postcss-nested'),
    cssImport = require('postcss-import'),
    browserSync = require('browser-sync').create();

gulp.task('default', function() {   
  console.log("Test to see if gulp is running");
});

gulp.task('html', function() {
  console.log("Something happening to my html");
});

gulp.task('styles', function() {
  return gulp.src('./app/assets/styles/styles.css')
  .pipe(postcss([cssImport, simplevars, nested, autoprefixer]))
  .pipe(gulp.dest('./app/temp/styles'));
});

gulp.task('cssInject', ['styles'], function() {
  return gulp.src('.app/temp/styles/styles.css')
  .pipe(browserSync.stream());
});

gulp.task('watch', function() {
  browserSync.init({
    notify:false,
    server: {
      baseDir: "app"
    }
  });

  watch('./app/index.html', function() {
    browserSync.reload();
  });

  watch('./app/assets/styles/**/*.css', function() {
    gulp.start('cssInject');
  });
});

When I run the gulp watch task, index.html file reloads as expected. But the cssInject task does not reload the page, nor does it inject the css changes. It does nothing. If I change the .pipe(browserSync.stream()); to .pipe(browserSync.reload());, it reloads + updates the changes, but I get this error:

[BS] Reloading Browsers...
[11:15:36] 'cssInject' errored after 22 ms
[11:15:36] TypeError: Cannot read property 'on' of undefined
    at DestroyableTransform.Readable.pipe (C:\Users\z\OneDrive\NewWebsite\node_modules\vinyl-fs\node_modules\readable-stream\lib\_stream_readable.js:516:7)
    at Gulp.<anonymous> (C:\Users\z\OneDrive\NewWebsite\gulpfile.js:34:4)
    at module.exports (C:\Users\z\OneDrive\NewWebsite\node_modules\orchestrator\lib\runTask.js:34:7)
    at Gulp.Orchestrator._runTask (C:\Users\z\OneDrive\NewWebsite\node_modules\orchestrator\index.js:273:3)
    at Gulp.Orchestrator._runStep (C:\Users\z\OneDrive\NewWebsite\node_modules\orchestrator\index.js:214:10)
    at C:\Users\z\OneDrive\NewWebsite\node_modules\orchestrator\index.js:279:18
    at finish (C:\Users\z\OneDrive\NewWebsite\node_modules\orchestrator\lib\runTask.js:21:8)
    at C:\Users\z\OneDrive\NewWebsite\node_modules\orchestrator\lib\runTask.js:52:4
    at f (C:\Users\z\OneDrive\NewWebsite\node_modules\once\once.js:17:25)
    at DestroyableTransform.onend (C:\Users\z\OneDrive\NewWebsite\node_modules\end-of-stream\index.js:31:18)
    at emitNone (events.js:72:20)
    at DestroyableTransform.emit (events.js:166:7)
    at C:\Users\z\OneDrive\NewWebsite\node_modules\vinyl-fs\node_modules\readable-stream\lib\_stream_readable.js:965:16
    at nextTickCallbackWith0Args (node.js:420:9)
    at process._tickCallback (node.js:349:13)

Can anyone suggest what I'm doing wrong? Thank you.

EDITED to add: I have version 2.12.8 of browser-sync.

Nhan · Answer 1 · 2016-11-09T15:48:01.173

2

Pass { stream: true } to .reload():

return gulp.src('.app/temp/styles/styles.css')
    .pipe(browserSync.reload({ stream: true }));

And change

edited Nov 09 '16 at 15:48

answered Nov 09 '16 at 11:51

Nhan

3,595
6
30
38

Tried that but it still doesn't reload the page. The changes are reflected when I manually reload the page but it doesn't get triggered automatically. – AffectionateOrange Nov 09 '16 at 12:44
@newbie Maybe changing this? `watch('./app/assets/styles/**/*.css', 'cssInject');` – Nhan Nov 09 '16 at 15:49
I think I fixed it. I created another gulp task (bs-reload) just with browserSync.reload() with cssInject as a dependency. I then used gulp to start bs-reload instead of cssInject in the gulp watch task. It reloads the page. I don't know why and I don't know how to make the browserSync stream work, but it will have to do for now. – AffectionateOrange Nov 09 '16 at 16:23
In your cuss watch task you call gulp.start : there is no gulp.start in the documentation. – Mark Nov 09 '16 at 21:02
Just a quick note, on my environment (Visual Studio 2017/Gulp 4.0.0/Browser-Sync 2.3.2), I had to change it to lowercase: `.pipe(browsersync.reload({ stream: true }));`. – Anthony Walsh Mar 22 '19 at 23:22
1

@AnthonyWalsh it's a variable name. The name and its casing are determined by you, not your environment. – Corey Apr 18 '20 at 20:25
You are dead right @Corey, thanks for pointing that out. For others new to Gulp like me, I originally declared the "`var browserSync = require('browser-sync').create();`" at the head of the Gulp file as _lowercase_) and so when I pasted the code from this answer of course it didn't match the Camel case `browserSync`. Silly me! :) – Anthony Walsh Jul 26 '20 at 19:38

score 0 · Answer 2 · answered Nov 10 '16 at 05:19

I see a couple of issues - as noted in my comment you used gulp.start. Try

gulp.watch('./app/assets/styles/**/*.css', ['styles']);

gulp.task('styles', function() {
  return gulp.src('./app/assets/styles/styles.css')
    .pipe(postcss([cssImport, simplevars, nested, autoprefixer]))
    .pipe(gulp.dest('./app/temp/styles'))
    .pipe(browserSync.reload({ stream:true }));
});

I combined your 'cssInject' task and 'styles' task since you could do what you wanted in one task easier. The browserSync.reload call will try to inject the changed files if it can rather than reloading the page. There are some good gulp and browserSync recipes at official gulp recipes for css injection.

BrowserSync.stream() not working, browserSync.reload() throws error

2 Answers2