gulp not injecting compiled css

458 Views Asked by At

I am using browser-sync and sass among other plugins, but for some reason the browser-sync doesn't inject the css, the sass is getting compiled and being watched but that's it.

here is my gulp file:

'use strict';
const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const pug = require('gulp-pug');
const browserSync = require('browser-sync').create();
const rename = require('gulp-rename');

const reload = browserSync.reload;

// Compile sass files to css
gulp.task('sass', function () {
  return gulp.src('./assets/css/*.sass')
      .pipe(sass().on('error', sass.logError))
      .pipe(autoprefixer({
        browsers: ['last 15 versions'],
        cascade: true
      }))
      .pipe(gulp.dest('./site/css'))
      .pipe(browserSync.stream())
});
// Compile pug files to html
gulp.task('pug', () =>{
  return gulp.src('_pugfiles/*.pug')
    .pipe(pug())
    .pipe(gulp.dest('./_include'))
    .pipe(gulp.dest('./site'))
});

gulp.task('js', function () {
  gulp.src("./assets/js/function.js")
  .pipe(rename("js/function.js"))
  .pipe(gulp.dest("./site"));
});
// the working directory
gulp.task('browser-sync', ['sass', 'pug', 'js'] ,function() {
    browserSync.init({
        server: {
            baseDir: "./site"
        },

    });
});
// Watch files compiling
gulp.task('watch', function () {
  gulp.watch('./assets/css/*.sass', ['sass']);
  gulp.watch('./_pugfiles/*.pug', ['pug']);
  gulp.watch('./site/*.html').on('change', reload);
  gulp.watch('./assets/js/*.js', ['js']);
  gulp.watch('./site/js/*.js').on('change', reload)
});

gulp.task('default', ['watch', 'browser-sync']);

and this is my folder structure:

  1. app
    • _include
    • _pugfiles
    • _site
    • _assets
      • css
      • img
      • js
    • node_modules
    • site

so here is what i have tried so far, rebuilding it again, removed few watch tasks also tried .pipe(browsersync.stream({match: '**/*.css'})); and files: ['!**/*.maps.css'] to ignore css map files.

maybe i have tried other things but i can't remember, i spent most of yesterday trying to fix it.

0

There are 0 best solutions below