Browser-sync не видит изменений в sass?

Question

[Кира]

Здравствуйте.
Подключаю через gulp browser-sync и почему-то он не видит изменений в sass файле. При этом если перезапустить gulp, то изменение происходит, но только если их прописывать непосредственно в main.sass. Если же я пишу в main.sass @import, то его он не видит вообще. Мне кажется я путаюсь в путях к файлам, но разобраться не получается.

Вот мой gulpfile

var gulp = require('gulp'),
	  sass = require('gulp-ruby-sass'),
	  autoprefixer = require('gulp-autoprefixer'),
	  browserSync = require('browser-sync').create(),
	  jade = require('gulp-jade');

gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir:'./'
        }
    });
});

// Compiling SASS to CSS
gulp.task('styles', function () {
  return sass('assets/css/main.sass')
    .on('error', sass.logError)
	.pipe(autoprefixer({
		browsers: ['last 3 versions','> 5%']
	}))
    .pipe(gulp.dest('assets/css/'))
    .pipe(browserSync.stream());

});

//HTML 
gulp.task('templates', function() {
  var YOUR_LOCALS = {};
 
  gulp.src('./*.jade')
    .pipe(jade({
      locals: YOUR_LOCALS,
      pretty: true
    }))
    .pipe(gulp.dest('./'))
});

//Default task
gulp.task('default', ['styles', 'watch', 'browser-sync', 'templates']);

gulp.task('watch', function(){
	gulp.watch('*.html').on('change', browserSync.reload);
	gulp.watch('*.jade').on('change', browserSync.reload);
	gulp.watch('*.css').on('change', browserSync.reload);
	gulp.watch('assets/css/main.sass', ['styles']);
	gulp.watch('*.jade', ['templates']);
})

Вот структура проекта

Answer 1

[abberati]

всё просто. ваш watch следит только за файлом assets/css/main.sass, поэтому и реагирует только на изменение этого файла.
с вашей структурой нужен такой watch:

gulp.task('watch', function(){
  gulp.watch('assets/css/**/*.sass', ['styles']);
})

советую познакомиться с этим

Comments

[Кира]

да, собственно в этом проблема и оказалась

[the-code-bro]

Большое спасибо, очень помогли. Ответ оказался на поверхности

Answer 2

[sergey]

Вот посмотрите мой таск:

var sass: ['./src/sass/main.{scss,sass}'] //вынес как переменную
gulp.task('styles', function() {
    gulp.src(src.sass)
    .pipe(sass({
            "sourcemap=none": true,
            noCache: true,
            compass: true,
            style: sassStyle,
            lineNumbers: sassComments
        }))
    .pipe(autoPrefixer())   
    .pipe(gulp.dest(outputDir + 'css'))
    .pipe(connect.reload()) //в данном случае на browser-sync, но сути дела не меняет
});

обратите внимание на путь откуда вы берете файл main.sass
и вообще очень странно это выглядит: return sass('assets/css/main.sass') sass в css...
У вас в проекте в папке assets должны быть папки sass и css, в первой папке вы храните sass файлы, не скомпилированные, а в css уже готовый к подключению файл стилей.
Кроме того очень хорошая практика, даже сказал бы стандарт: в main.sass не писать никаких стилей, только импорты и точка.

Comments

[Кира]

спасибо за совет насчет папок, так и сделаю)