kylesimmonds kylesimmonds - 3 months ago 40
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')
.pipe(plumber())
.pipe(sass({
style: 'expanded',
precision: 10
}))
.pipe(autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))
.pipe(cssmin())
.pipe(gulp.dest('./dist'))
.pipe(browserSync.stream());
});


gulp.task('coffee', function() {
return gulp.src('./src/coffee/**/*.coffee')
.pipe(plumber())
.pipe(coffee())
.pipe(uglify())
.pipe(gulp.dest('./dist'))
.pipe(browserSync.stream());
});


gulp.task('serve', function() {
browserSync.init({
proxy: 'http://mamp-site.dev'
});
gulp.watch('./src/scss/**/*.scss', ['sass']);
gulp.watch('./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
browserSync.stream()
after
gulp.dest()
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
'coffee'
task but not my
'sass'
task? This is my first go at gulp, so I'm hoping it's something simple.

EDIT: watching
'sass'
only within the
'serve'
task works, but not with both
'sass'
and
'coffee'

Answer

I don't know why your sass is not reloading, but you should not be using browserSync.stream for your javascript. Perhaps the streams are getting mixed up. Your watch should be

gulp.watch('./src/coffee/**/*.coffee', ['coffee-watch']);

and there should be

gulp.task('coffee-watch', ['coffee'], function (done) {
    browserSync.reload();
    done();
});

Remove .pipe(browserSync.stream()); from your coffee task.

Comments