Problem with HTML reload with TailwindCSS and Gulp

Question

I'm setting up a project with TailwindCSS. I'm trying to set up my automation with Gulp, but I'm running into an issue with the HTML reloading. Everything seems to work perfectly fine when I run Gulp, it minifies and cleans my CSS, concats and minifies my JS, etc., but when I try saving a class from Tailwind in my HTML, my BrowserSync in my Gulp file doesn't reload. My Gulpfile is below.

var gulp = require('gulp')
    autoprefixer = require('gulp-autoprefixer')
    cleanCSS = require('gulp-clean-css')
    rename = require('gulp-rename')
    purgecss = require('gulp-purgecss')
    concat = require('gulp-concat')
    uglify = require('gulp-uglify')
    replace = require('gulp-replace')
    postcss = require('gulp-postcss')
    tailwindcss = require('tailwindcss')
    browserSync = require('browser-sync').create();


// CSS TASK
function css(){
  return gulp.src('./src/css/app.css')
    .pipe(postcss([
      require('tailwindcss'),
      require('autoprefixer'),
    ]))
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(rename(function(path){
      path.extname = ".min.css"
    }))
    .pipe(
      purgecss({
        content: ['./*.html']
      })
    )
    .pipe(gulp.dest('./dist/css'))
    .pipe(browserSync.stream());
}


// JS TASK
function js(){
  return gulp.src('./src/js/**/*.js')
    .pipe(concat('main.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))
    .pipe(browserSync.stream());
}


// CACHEBUSTING TASK
const cbString = new Date().getTime();
function cacheBustTask(){
  return src(['index.html'])
    .pipe(replace(/cb=\d+/g, 'cb=' + cbString))
    .pipe(dest('.')
  );
}


// BROWSERSYNC
function serve(){
  browserSync.init({
    server: {
      baseDir: './'
    }
  })
}


// WATCH
gulp.watch('./src/css/**/*.css', css);
gulp.watch('./src/js/**/*.js', js);
gulp.watch('./*.html').on('change', browserSync.reload);


// EXPORT IN ORDER
exports.default = gulp.parallel(css, js, serve);

okikio okikio · Accepted Answer · 2020-06-11T05:03:30

I don't think you need ./ in your gulpfile, also I would suggest not having tailwindcss run as part of your css on file change, watch gulp task.

postcss([
    require('tailwindcss'),
    require('autoprefixer'),
])

I'd suggest placing it in it's own gulp task, that you run whenever you update tailwindcss.

Problem with HTML reload with TailwindCSS and Gulp

1 Answers