Browsersync doesn't inject css

Question

In my one project I use Gulp and Browsersync. It's working well.

I copied the gulpfile.js to my new project and replaced paths. Browsersync doesn't inject css now.

This problem I see every time I create new project with the same gulpfile.js I used for another project. Every time. Only Browsersync. Why?

The only difference between these 2 projects is dest path: previous path was ../css; current path: ../assets/css.

My 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'));

And your html css link in the new project follows the change to the dest path of ../assets/css? — Mark, Feb 04 '19 at 23:51

score 0 · Answer 1 · answered Feb 05 '19 at 16:20

Solved!

The problem was in OctoberCMS filter (combiner) which didn't allow to watch for files changes.

Old css path:

<link rel="stylesheet" href="{{ ['assets/css/main.min.css']|theme }}">

New working path:

<link rel="stylesheet" href="{{ 'assets/css/main.min.css'|theme }}">

Browsersync doesn't inject css

1 Answers1