咕嘟咕嘟SASS任务不再是“手表”由于添加媒体查询

Question

我有自动看着我的.JS和.SCSS文件，只要其中的一个改变时，all.main.js和all.min.css一个新的编译版本将被创建一饮而尽文件。

我已经开始使用断点和媒体查询，并且我的吞噬任务不再看着个人文件的变化。如果我手动运行gulp SASS，会创建一个编译版本（所以没有错误）。

Gulpfile：

var paths = { 
    js: ['assets/js/app.js', 'assets/js/controllers/*.js', 'assets/js/services/*.js', 'assets/js/directives/*.js'], 
    sass: ['assets/css/styles.scss'] 
}; 

// SASS task 
gulp.task('sass', function() { 
    gulp.src(paths.sass) 
     .pipe(sass()) 
     .pipe(concat('all.min.css')) 
     .pipe(gulp.dest('assets/css/')); 
}); 

gulp.task('scripts', function() { 
    return gulp.src(paths.js) 
    .pipe(concat('all.min.js')) 
    .pipe(ngannotate()) 
    .pipe(gulp.dest('assets/js/')) 
}); 

// Watch Files For Changes 
gulp.task('watch', function() { 
    gutil.log("Watching your files...")   
    gulp.watch(paths.js, ['scripts']); 
    gulp.watch(paths.sass, ['sass']); 
    gulp.watch('assets/css/*.scss'); 
    gulp.watch('assets/css/styles.scss'); 
}); 

// Default Task 
gulp.task('default', ['connect', 'scripts', 'sass', 'watch']); 

Styles.scss

@mixin breakpoint($point) { 
    @if $point == desktop { 
     @media (min-width: 70em) { @content ; } 
    } 
    @else if $point == laptop { 
     @media (min-width: 64em) { @content ; } 
    } 
    @else if $point == tablet { 
     @media (min-width: 50em) { @content ; } 
    } 
    @else if $point == phablet { 
     @media (min-width: 37.5em) { @content ; } 
    } 
    @else if $point == mobileonly { 
     @media (max-width: 37.5em) { @content ; } 
    } 
} 

@import "reset.scss"; 
@import "vars.scss"; 
@import "header.scss"; 
@import "home.scss"; 
@import "images-icons.scss"; 
@import "utilities.scss"; 
@import "widths.scss"; 

我似乎无法理解为什么我SASS任务不再是手表我的文件。

Answer 1

看起来像你的配置没有做任何事情，除非运行sass只有当styles.scss改变。

咕嘟咕嘟手表需要的文件看，过程运行 -

gulp.watch([source], [task]); 

下面试试这个。

// Watch Files For Changes 
gulp.task('watch', function() { 
    gutil.log("Watching your files...")   
    gulp.watch(paths.js, ['scripts']); 
    gulp.watch('assets/css/*.scss', ['sass']); 
});