1

.JSファイルとファイルを自動的に監視する gulp ファイルがあり.SCSS、これらのいずれかが変更されるたびに、新しいコンパイル済みバージョンのall.main.jsandall.min.cssが作成されます。

それ以来、ブレークポイントとメディア クエリの使用を開始しましたが、gulp タスクは個々の.SCSSファイルの変更を監視していないようです。gulp SASS を手動で実行すると、コンパイルされたバージョンが作成されます (エラーは発生しません)。

ガルプファイル:

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

スタイル.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 タスクがファイルを監視しなくなった理由がわかりません。

4

1 に答える 1

1

変更されたsass場合にのみ実行する以外、構成は何もしていないようです。styles.scss

Gulp ウォッチには、監視するファイルと実行するプロセスが必要です -

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']);
});
于 2014-12-08T17:15:12.277 に答える