自添加媒体查询以来，Gulp SASS 任务不再“监视”答案

【问题标题】：Gulp SASS Task No longer 'Watches' Since Adding Media Queries自添加媒体查询以来，Gulp SASS 任务不再“监视”
【发布时间】：2014-12-08 07:36:36
【问题描述】：

我有一个 gulp 文件，它会自动监视我的 .JS 和 .SCSS 文件，每当其中一个文件发生变化时，就会创建一个新的 all.main.js 和 all.min.css 编译版本。

从那以后我开始使用断点和媒体查询，我的 gulp 任务似乎不再关注个人 .SCSS 文件的更改。如果我手动运行 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 任务不再监视我的文件。

【问题讨论】：

标签： css sass gulp gulp-watch gulp-sass

【解决方案1】：

看起来您的配置除了在 styles.scss 更改时运行 sass 之外没有做任何事情。

Gulp watch 需要要监视的文件，以及要运行的进程 -

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']);
});

【讨论】：