Я был глоток файл, который автоматически смотрел мои .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 задача больше не смотрит мои файлы.
Выполнено трюк, чем вы. – user3731438