Gulp File Watch with BrowserSync - gulp

Question

I'm trying to get my Gulp File working.
Currently it isn't detecting any of my html, sass or JS changes. SASS and JS isn't compiling into the assets folder - this was working until I began to use browserSync... I did have it detecting the html changes but now that isn't working either after I tried to make my gulpfile more efficient.
I need some experienced eyes to see what am I doing wrong below...
package.json
{
"devDependencies": {
"gulp": "latest",
"gulp-util": "latest",
"gulp-sass": "latest",
"gulp-uglify": "latest",
"gulp-concat": "latest",
"gulp-connect-php": "latest",
"gulp-rename": "latest",
"browser-sync": "latest"
}
}
gulpfile.js
var gulp = require('gulp'),
gutil = require('gulp-util'),
sass = require('gulp-sass'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
connect = require('gulp-connect-php'),
browserSync = require('browser-sync');
// Change these values
var jsSources = ['assets/scripts/*.js'],
sassSources = ['assets/sass/*.scss'],
sassSources = ['**/*.php'],
outputDir = 'assets',
virtualHost = 'annual-review-2016.dev';
// Log Errors
gulp.task('log', function() {
gutil.log('== My Log Task ==')
});
// Manage CSS
gulp.task('sass', function() {
gulp.src('sassSources')
.pipe(sass({style: 'expanded'}))
.pipe(concat('app.css'))
.on('error', gutil.log)
.pipe(gulp.dest('outputDir'))
});
// Manage JS
gulp.task('js', function(){
return gulp.src('jsSources')
.pipe(concat('app.js'))
.pipe(uglify())
.on('error', gutil.log)
.pipe(gulp.dest('outputDir'));
});
// Live Reload in Browser
gulp.task('connect-sync', function() {
connect.server({}, function (){
browserSync({
proxy: 'annual-review-2016.dev'
});
});
});
// Watch the Styles and Scripts on Save
gulp.task('watch', function() {
gulp.watch('sassSources', ['sass']);
gulp.watch('jsSources', ['js']);
gulp.watch('phpSources').on('change', function () {
browserSync.reload();
});
});
gulp.task('default', ['js', 'sass', 'connect-sync', 'watch']);

Answer 1

You have duplicate declaration of sassSources
You need to remove quotation mark in gulp.dest('outputDir'), otherwise gulp will write the output to /outputDir instead of /assets
And for auto-reloading you need to include .pipe(browserSync.reload({stream: true})); at the bottom of your pipe chain (under gulp.dest in 'sass' task for example).