Друзья! Проблема в следующем:
я пытаюсь less код скомпилировать в css и в браузере видеть все изменения, которые я провожу с less файлами БЭМ-блоков моей верстки.
Все блоки собраны через импорт в style.less, который компилируется в style.css.
Прописываю в консоли gulp watch - все хорошо - появляется style.css со всем кодом, отображается в браузере. Но если я произвожу изменения в любом less документе - ничего не меняется. Вотчер фиксирует - но изменения в браузере и style.css не отображаются. Если делаю изменения непосредственно в style.less - все изменения видны и в браузере и style.css. У меня предположение, что дело в import - файлы первый раз собираются, а потом как будто кэшируются.
Пробовал отключать кэш в браузере, перебирал код gulpfile.js.
Что можно попробовать сделать?
Код прикрепляю ниже.
var gulp = require('gulp');
var less = require('gulp-less'); //Подключаем Less пакет
var browserSync = require('browser-sync');
var plumber = require('gulp-plumber');
gulp.task('less', function(){ // Создаем таск Less
return gulp.src('source/less/style.less') // Берем источник
.pipe(plumber())
.pipe(less()) // Преобразуем Less в CSS посредством gulp-less
.pipe(gulp.dest('source/css')) // Выгружаем результата в папку source/css
.pipe(browserSync.reload({stream: true})) // Обновляем CSS на странице при изменении
});
gulp.task('browser-sync', function() { // Создаем таск browser-sync
browserSync({ // Выполняем browser Sync
server: { // Определяем параметры сервера
baseDir: 'source' // Директория для сервера - source
},
notify: false // Отключаем уведомления
});
});
gulp.task('watch', ['browser-sync', 'less'], function() {
gulp.watch('source/**/*.less', ['less']); // Наблюдение за less файлами
gulp.watch('source/*.html', browserSync.reload);
// Наблюдение за другими типами файлов
});
