Gulp Sass Compiles Only With Two Saves - gulp

Question

I've been trying to compile changes to #imports along with those to main SCSS files, and basically have this working.
The issue with my setup: To see changes, I must save files twice (irrespective of whether they're main files or imports). Ideas on this are greatly appreciated.
The directory structure is simply:
--> SCSS
--> SCSS/partials
Here are the relevant parts of my gulpfile:
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var autoprefixer = require('gulp-autoprefixer');
var rename = require('gulp-rename');
var sync = require('browser-sync').create(); // create a browser sync instance.
var sassPaths = [
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src'
];
var paths = {
'assets': 'assets',
'dev': 'assets/styles/dev'
};
// DEV CSS
gulp.task('dev-styles', function() {
return gulp.src(['scss/**/*.scss', 'scss/*.scss'])
.pipe($.sass({
includePaths: sassPaths,
outputStyles: 'expanded'
})
.on('error', $.sass.logError))
.pipe(autoprefixer({
browsers: ['last 2 versions', 'ie >=9']
}))
.pipe(rename({
suffix: '.dev'
}))
.pipe(gulp.dest('paths.dev'));
});
// DEFAULT WATCH
gulp.task('default', function() {
sync.init({
injectChanges: true,
proxy: 'localhost/basic-modx'
});
gulp.watch([ 'scss/**/*.scss', 'scss/*.scss' ], ['dev-styles']);
gulp.watch([ 'scss/**/*.scss', 'scss/*.scss' ]).on('change', sync.reload);
});

Answer 1

Your watches are set up oddly. I suspect that the second which reloads the browser finishes before the first which actually transpiles the scss, so nothing has changed when the reload occurs. Hence you have to hit save twice.
The better way from browserSync documentation is to have the reload at the end of your 'dev-styles' task like this:
gulp.task('dev-styles', function() {
return gulp.src(['scss/**/*.scss', 'scss/*.scss'])
.pipe($.sass({
includePaths: sassPaths,
outputStyles: 'expanded'
})
.on('error', $.sass.logError))
.pipe(autoprefixer({
browsers: ['last 2 versions', 'ie >=9']
}))
.pipe(rename({
suffix: '.dev'
}))
.pipe(gulp.dest('paths.dev'));
.pipe(sync.stream());
});
and get rid of the second gulp.watch statement.