2014-12-08 3 views
1

Я был глоток файл, который автоматически смотрел мои .JS и .SCSS файлов и всякий раз, когда один из них изменился, новая скомпилированная версия all.main.js и all.min.css будет создана.Глоток SASS Задача Нет больше «не Часы» С Добавлением медиазапросы

С тех пор я начал использовать точки останова и медиа-запросы, и моя задача gulp больше не смотрит файлы userна изменения. Если я вручную запускаю 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 задача больше не смотрит мои файлы.

ответ

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

Выполнено трюк, чем вы. – user3731438

Смежные вопросы