Browsersync не вводит CSS
В моем одном проекте я использую Gulp и Browsersync. Работает хорошо.
Я скопировал gulpfile.js
в мой новый проект и заменил пути. Browsersync не вводит CSS сейчас.
Эту проблему я вижу каждый раз, когда создаю новый проект с таким же gulpfile.js
Я использовал для другого проекта. Каждый раз. Только Browsersync. Зачем?
Единственная разница между этими двумя проектами dest
путь: предыдущий путь был ../css
; текущий путь: ../assets/css
,
мой gulpfile.js
:
var gulp = require('gulp'),
sass = require('gulp-sass'),
browserSync = require('browser-sync').create(),
rename = require('gulp-rename'),
cssnano = require('gulp-cssnano'),
autoprefixer = require('gulp-autoprefixer');
gulp.task('sass', function(){
return gulp.src('sass/**/*.sass')
.pipe(sass())
.pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], {cascade: true}))
.pipe(cssnano())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('../assets/css'))
.pipe(browserSync.stream());
});
gulp.task('browser-sync', function(){
browserSync.init({
proxy: "localhost/october/home"
});
});
gulp.task('watch', function(){
gulp.watch('sass/**/*.sass', gulp.parallel('sass'));
gulp.watch('../**/*.htm').on("change", browserSync.reload);
});
gulp.task('default', gulp.parallel('watch', 'browser-sync'));
1 ответ
Решено!
Проблема заключалась в фильтре (комбинере) OctoberCMS, который не позволял следить за изменениями файлов.
Старый путь CSS:
<link rel="stylesheet" href="{{ ['assets/css/main.min.css']|theme }}">
Новый рабочий путь:
<link rel="stylesheet" href="{{ 'assets/css/main.min.css'|theme }}">