Gulp Sass kompiliert nur mit zwei Speichern

Question

Ich habe versucht, Änderungen an @imports zusammen mit denen zu SCSS-Dateien zu kompilieren, und im Grunde funktioniert das.

Das Problem mit meinem Setup: Um Änderungen zu sehen, muss ich Dateien zweimal speichern (unabhängig davon, ob sie Hauptdateien oder Importe sind). Ideen dazu werden sehr geschätzt.

Die Verzeichnisstruktur ist einfach:

-> SCSS
-> SCSS/partials

Hier sind die relevanten Teile meines 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' 
 
    }); 
 
\t 
 
\t gulp.watch([ 'scss/**/*.scss', 'scss/*.scss' ], ['dev-styles']); 
 
    gulp.watch([ 'scss/**/*.scss', 'scss/*.scss' ]).on('change', sync.reload); 
 
});

Answer 1

Ihre Uhren sind seltsam eingerichtet. Ich vermute, dass die Sekunde, die den Browser neu lädt, vor dem ersten fertig ist, der die scss tatsächlich transpiliert, so dass sich nichts geändert hat, als das Nachladen erfolgt. Daher musst du zweimal speichern.

Der bessere Weg von browserSync documentation ist das Nachladen am Ende Ihrer Aufgabe ‚dev-Stile‘ wie diese zu haben:

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()); 
}); 

und loszuwerden der zweiten gulp.watch Aussage.