Gulp-sass and Browser Sync - gulp

Question

I am not sure if the problem is browser-sync but that would be my best bet. My problem is I am using gulp to automate my workflow for the first time. And when I "gulp things" it runs it opens a new webpage with my project like it should, but when I change anything in my SASS file it does not updates it, even if I hit the refresh key, the only way for me to refresh it is to re-gulp everything.
I have all the dependecies updated. I am using Jekyll also. And some other gulp-plugins.
Heres my gulpfile.js:
var gulp = require('gulp'),
browserSync = require('browser-sync'),
sass = require('gulp-sass'),
prefix = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
cp = require('child_process'),
jade = require('gulp-jade'),
bourbon = require('bourbon').includePaths;
var messages = {
jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
};
/**
* Build the Jekyll Site
*/
gulp.task('jekyll-build', function (done) {
browserSync.notify(messages.jekyllBuild);
var pl = process.platform === "win32" ? "jekyll.bat" : "jekyll";
return cp.spawn(pl, ['build'], {stdio: 'inherit'})
.on('close', done);
});
/**
* Rebuild Jekyll & do page reload
*/
gulp.task('jekyll-rebuild', ['jekyll-build'], function () {
browserSync.reload();
});
/**
* Wait for jekyll-build, then launch the Server
*/
gulp.task('browser-sync', ['sass', 'js', 'jekyll-build'], function() {
browserSync({
server: {
baseDir: '_site'
},
notify: false
});
});
/**
* Compile files from _scss into both _site/css (for live injecting) and site (for future jekyll builds)
*/
gulp.task('sass', function () {
return gulp.src('assets/css/main.scss')
.pipe(sass({
includePaths: [bourbon],
onError: browserSync.notify
}).on('error', sass.logError))
.pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
.pipe(rename({suffix: '.min', prefix : ''}))
.pipe(minifycss())
.pipe(gulp.dest('assets/css'))
.pipe(gulp.dest('_site/css'))
.pipe(browserSync.reload({stream:true}));
});
/**
* Compile Jade
*/
gulp.task('jade', function() {
return gulp.src('_jadefiles/*.jade')
.pipe(jade())
.pipe(gulp.dest('_includes'));
});
/*
** JS Task
*/
gulp.task('js', function() {
return gulp.src('assets/js/common.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('common.js'))
.pipe(gulp.dest('assets/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('assets/js'))
.pipe(gulp.dest('_site/js'));
});
/**
* Watch scss files for changes & recompile
* Watch html/md files, run jekyll & reload BrowserSync
*/
gulp.task('watch', function () {
gulp.watch('assets/js/**/*.js', ['js']).on("change", browserSync.reload);
gulp.watch('assets/css/**', ['sass']);
gulp.watch(['*.html', '_layouts/*.html', '_posts/*', '_includes/*'], ['jekyll-rebuild']);
gulp.watch('_jadefiles/*.jade', ['jade']);
});
/**
* Default task, running just `gulp` will compile the sass,
* compile the jekyll site, launch BrowserSync & watch files.
*/
gulp.task('default', ['browser-sync', 'watch']);

Answer 1

where are your sass files?
the bit at the bottom - 'watch' is probably where the problem is.
I think you need to add where your sass folder is. Assuming it is _sass then maybe adding it to the 3rd gulp.watch line like this would work.
gulp.watch(['*.html','_sass/*', '_layouts/*.html', '_posts/*', '_includes/*'], ['jekyll-rebuild']);

Answer 2

This code sets up your watches. But only the js changes are set to notify browser sync:
gulp.task('watch', function () {
gulp.watch('assets/js/**/*.js', ['js']).on("change", browserSync.reload);
gulp.watch('assets/css/**', ['sass']);
gulp.watch(['*.html', '_layouts/*.html', '_posts/*', '_includes/*'], ['jekyll-rebuild']);
gulp.watch('_jadefiles/*.jade', ['jade']);
});
Tell gulp watch to notify browser sync on sass change:
gulp.watch('assets/css/**/*.sass', ['sass']).on("change", browserSync.reload);
But really you want to run 'sass' on sass changes, and then notify browserSync on css changes:
gulp.watch('assets/css/**/*.css').on("change", browserSync.reload);
gulp.watch('assets/css/**/*.sass', ['sass'])