使用 TailwindCSS 和 Gulp 重新加载 HTML 的问题答案

【问题标题】：Problem with HTML reload with TailwindCSS and Gulp使用 TailwindCSS 和 Gulp 重新加载 HTML 的问题
【发布时间】：2020-04-17 15:26:35
【问题描述】：

我正在使用 TailwindCSS 建立一个项目。我正在尝试使用 Gulp 设置我的自动化，但我遇到了 HTML 重新加载的问题。当我运行 Gulp 时，一切似乎都运行良好，它会缩小和清理我的 CSS、连接和缩小我的 JS 等，但是当我尝试在我的 HTML 中从 Tailwind 保存一个类时，我的 Gulp 文件中的 BrowserSync 不会重新加载.我的 Gulpfile 在下面。

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

【问题讨论】：

标签： html gulp reload tailwind-css gulp-browser-sync

【解决方案1】：

我认为你的 gulpfile 中不需要 ./，我也建议不要在文件更改时将 tailwindcss 作为 css 的一部分运行，观察 gulp 任务。

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

我建议将它放在它自己的 gulp 任务中，您可以在更新 tailwindcss 时运行该任务。

【讨论】：