Gulp kompiliert @ Import Sass-Dateien

Question

Ich versuche, Gulp meine Sass-Dateien zu kompilieren. Es sieht Änderungen in der Datei main.sass, aber wenn ich Dateien importiere, sieht es keine Änderungen in ihnen, es sei denn, ich gulp neu starten.

Hier ist meine gulpfile

var gulp = require('gulp'), 
     sass = require('gulp-ruby-sass'), 
     autoprefixer = require('gulp-autoprefixer'), 
     browserSync = require('browser-sync').create(), 
     jade = require('gulp-jade'); 

gulp.task('browser-sync', function() { 
    browserSync.init({ 
     server: { 
      baseDir:'./' 
     } 
    }); 
}); 

// Compiling SASS to CSS 
gulp.task('styles', function() { 
    return sass('assets/sass/main.sass') 
    .on('error', sass.logError) 
    .pipe(autoprefixer({ 
    browsers: ['last 3 versions','> 5%'], 
    cascade: false 
    })) 
    .pipe(gulp.dest('assets/css/')) 
    .pipe(browserSync.stream()); 

}); 
//HTML 
gulp.task('templates', function() { 
    var YOUR_LOCALS = {}; 

    gulp.src('./*.jade') 
    .pipe(jade({ 
     locals: YOUR_LOCALS, 
     pretty: true 
    })) 
    .pipe(gulp.dest('./')) 
}); 

//Default task 
gulp.task('default', ['styles', 'watch', 'browser-sync', 'templates']); 

gulp.task('watch', function(){ 
    gulp.watch('*.html').on('change', browserSync.reload); 
    gulp.watch('*.jade').on('change', browserSync.reload); 
    gulp.watch('*.css').on('change', browserSync.reload); 
    gulp.watch('assets/sass/main.sass', ['styles']); 
    gulp.watch('*.jade', ['templates']); 
}) 

Und das ist die Struktur meines Projekts

Answer 1

Sie sind nur für Änderungen an assets/sass/main.sass beobachten. Sie müssen sich für Änderungen an jedem .sass Datei unter assets/sass sehen:

gulp.watch('assets/sass/**/*.sass', ['styles']); 

Statt:

gulp.watch('assets/sass/main.sass', ['styles']);