我想知道在gulpfile上哪里出错了。我使用了browsersync,因此每次对我的代码进行更改时,它将自动重新加载html。但是,当我在html标签上应用tailwind类时,它不会在浏览器上生效。
这是我的gulpfile代码:
const { src, dest, watch, series, parallel } = require('gulp');
const sourcemaps = require('gulp-sourcemaps');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const postcss = require('gulp-postcss');
const purgecss = require('gulp-purgecss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const tailwindcss = require('tailwindcss');
var replace = require('gulp-replace');
var browserSync = require('browser-sync').create();
function browser(){
browserSync.init({
server: { baseDir: './' }
})
}
const files = {
cssPath: 'app/styles/**/*.css',
jsPath: 'app/scripts/**/*.js'
}
function cssTask(){
return src(files.cssPath)
.pipe(sourcemaps.init()) // initialize sourcemaps first
.pipe(postcss([ tailwindcss(), autoprefixer(), cssnano() ]))
.pipe(purgecss({ content: ['./*.html'] }))
.pipe(sourcemaps.write('.'))
.pipe(dest('dist/css')
.pipe(browserSync.stream())
); // put final CSS in dist folder
}
function jsTask(){
return src([
files.jsPath
])
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(dest('dist/js')
);
}
var cbString = new Date().getTime();
function cacheBustTask(){
return src(['index.html'])
.pipe(replace(/cb=\d+/g, 'cb=' + cbString))
.pipe(dest('.'));
}
function watchTask(){
watch([files.cssPath, files.jsPath],
watch('./*.html').on('change', browserSync.reload),
parallel(cssTask, jsTask));
}
exports.default = series(
parallel(browser, cssTask, jsTask),
cacheBustTask,
watchTask
);
这是我的main.css样子:
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
@apply .bg-gray-100;
}