使用TailwindCSS和Gulp重载HTML的问题

Question

我正在用TailwindCSS建立一个项目。 我试图用Gulp设置我的自动化，但我遇到了一个HTML重载的问题。 当我运行Gulp的时候，一切似乎都很好，它对我的CSS进行精简和清理，对我的JS进行合并和精简，等等，但是当我尝试在我的HTML中保存Tailwind的一个类时，我的Gulp文件中的BrowserSync没有重新加载。 我的Gulp文件如下。

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

Answer 1

我不认为你需要 ./ 在你的gulp文件中，我也建议不要让tailwindcss作为css on file change的一部分来运行，看着gulp任务。

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

我建议把它放在自己的gulp任务中，每当你更新tailwindcss的时候就运行它。