Gulp Sass Compiles Only With Two Saves -

i've been trying compile changes @imports along main scss files, , have working.

the issue setup: see changes, must save files twice (irrespective of whether they're main files or imports). ideas on appreciated.

the directory structure simply:

--> scss
--> scss/partials

here relevant parts of 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 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);  });

your watches set oddly. suspect second reloads browser finishes before first transpiles scss, nothing has changed when reload occurs. hence have hit save twice.

the better way browsersync documentation have reload @ end of 'dev-styles' task 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 rid of second gulp.watch statement.