kylesimmonds kylesimmonds - 2 months ago 24x
CoffeeScript Question

Why would Browsersync live reload for one compilation task but not another?

I have a gulpfile running to compile Sass, CoffeeScript, and live reload both through Browsersync:

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var cssmin = require('gulp-cssmin');
var coffee = require('gulp-coffee');
var uglify = require('gulp-uglify');
var browserSync = require('browser-sync');

gulp.task('sass', function() {
return gulp.src('./src/scss/**/*.scss')
style: 'expanded',
precision: 10
.pipe(autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))

gulp.task('coffee', function() {
return gulp.src('./src/coffee/**/*.coffee')

gulp.task('serve', function() {
proxy: ''
});'./src/scss/**/*.scss', ['sass']);'./src/coffee/**/*.coffee', ['coffee']);

Browsersync successfully reloads my compiled JS every time I make a change, but won't reload my compiled CSS. I know placing
is correct, because Browsersync says it only cares about your CSS when it's finished compiling. I also verified that my Sass is compiling.

Why would Browsersync work for my
task but not my
task? This is my first go at gulp, so I'm hoping it's something simple.

EDIT: watching
only within the
task works, but not with both


I don't know why your sass is not reloading, but you should not be using for your javascript. Perhaps the streams are getting mixed up. Your watch should be'./src/coffee/**/*.coffee', ['coffee-watch']);

and there should be

gulp.task('coffee-watch', ['coffee'], function (done) {

Remove .pipe(; from your coffee task.