Не отображаются изменения в css файле через Gulp — как сделать?

Question

[Алексей Дзюба]

spoiler

var gulp = require('gulp'),
	sass = require('gulp-sass'),
	browserSync = require('browser-sync');

gulp.task('sass', function() {
	return gulp.src('app/sass/main.sass')
	.pipe(sass())
	.pipe(gulp.dest('app/css'))
	.pipe(browserSync.reload({stream: true}))
});

gulp.task('watch', ['browser-sync', 'sass'], function() {
	gulp.watch('app/sass/main.sass', ['sass']);
	gulp.watch('app/*.html', browserSync.reload)
	gulp.watch('app/js/**/*.js', browserSync.reload)
});

gulp.task('browser-sync', function() {
	browserSync({
		server: {
			baseDir: 'app'
		},
		notify: false
	});
});

В спойлере код галп файла. Как там нужно изменить код, чтобы браузер перезагружался при изменении в css файлах? Просто он изменяется сейчас тогда, когда изменяется файл main.sass, а там у меня сплошные импорты (хочу верстать по бэму, чтобы каждый css файл отвечал за независимый блок).

Comments

[Алексей Уколов]

Прекратите, пожалуйста, спамить в тегах.

[Hyubert]

вместо .src('app/sass/main.sass')
напишите
.src('app/sass/**/*.sass')

** - во всех папках
*.sass - все файлы сасс

Answer 1

[Алексей Дзюба]

Нужно было просто прописать дефолтный таск галпа gulp.watch и указать все файлы САСС или ЛЕСС (какие используете): gulp.watch("app/sass/**/*.sass", ["sass"]);