Question

我有一个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任务不再看我的档案。

Answer 1

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

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

Gulp SASS任务不再是＆＃39;手表＆＃39;自添加媒体查询

1 个答案: