0

I'm writing my gulp file for my project. The code is below: 

gulp.task('sass', function() {
    gulp.src(paths.styles.src)
        .pipe(sass({
            outputStyle: 'compact',
            includePaths: [paths.styles.src]
        }))
        .pipe(autoprefix())
        .pipe(gulp.dest(paths.styles.dest))
        .pipe(browserSync.reload());
});

What I'm trying to do is reload the browser if there is any change with the *.scss files. (My paths.styles.src is 'dev/assets/scss/**/*.scss')

But the last pipe does not work. It only works if I put some configuration like:

.pipe(browserSync.reload({
    stream: true
}));

Can anyone explain for me since the document online is not clear enough.

Thanks alot.

eriknguyen
  • 520
  • 4
  • 13

1 Answers1

0

I use browsersync reload this way: gulp.watch(, ['styles']); gulp.watch(, function() { browsersync.reload(); }); This way you watch for changes in your scss compile in change and watch for the output and reload in change of the output CSS files. In your way you reload every time after compile which works aswell. But u need a watch method for changes in the scss files. If you want to use it in the pipe after the compilation you have to der it as

reload({stream: true})

That way you don't reload the whole document. Browsersync only injects the New CSS into the Browser.

Alex
  • 89
  • 1
  • 6
  • Yes, I'm using a watch method to call this ['sass'] function. But I still don't get why the browsersync.reload(); called inside the pipe cannot run. – eriknguyen Jun 17 '15 at 03:27