我试图使配置与gulp,sass广告tailwindcss,一切工作正常,但当我第一次运行gulp我可以看到我的顺风类应用,但当我试图添加更多的类,我看不到的变化,即使服务器正在运行,类编译在我的CSS文件在dist文件夹,我应该回来运行gulp另一次,查看最新的更改。这里你可以看到我的gulpjs配置和tailwind配置,我做错了什么,我希望能够看到我的CSS更改,而无需每次重新启动服务器:/
const { series, src, dest, watch } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
const postcss = require('gulp-postcss');
const cssnano = require('cssnano');
const babel = require('gulp-babel');
const terser = require('gulp-terser');
const tailwindcss = require('tailwindcss');
let imagemin;
const imagewebp = require('gulp-webp');
const browserSync = require('browser-sync').create();
// css Task
function scssTask() {
return src('assets/src/scss/app.scss', { sourcemaps: true })
.pipe(sass())
.pipe(autoprefixer('last 2 versions'))
.pipe(postcss([cssnano(), tailwindcss()]))
.pipe(dest('dist', { sourcemaps: '.' }))
.pipe(browserSync.stream());
}
// Js Task
function jsTask() {
return src('assets/src/js/*.js', { sourcemaps: true })
.pipe(babel({ presets: ['@babel/preset-env'] }))
.pipe(terser())
.pipe(dest('dist', { sourcemaps: '.' }));
}
const optimizeimg = series(
async () => {
imagemin = await import('gulp-imagemin');
},
() => src('assets/src/images/**/*')
.pipe(
imagemin.default(
[
imagemin.mozjpeg({ quality: 80, progressive: true }),
imagemin.optipng({ optimizationLevel: 2})
]))
.pipe(dest('./dist/images'))
);
//optimize and move images
function webpImage() {
return src('dist/images/*.{jpg,png}') // change to your source directory
.pipe(imagewebp())
.pipe(dest('dist/images')) // change to your final/public directory
};
function browserSyncServer(cb) {
browserSync.init({
server: {
baseDir: './',
},
notify: {
styles: {
top: 'auto',
bottom: '0',
},
},
});
cb();
}
function browserSyncReload(cb) {
browserSync.reload();
cb();
}
function watchTasks(cb) {
watch('*.html', browserSyncReload);
watch(
['assets/src/scss/**/*.scss', 'assets/src/scss/*.scss', 'assets/src/images/*.{png,jpg}'],
series(scssTask,optimizeimg,webpImage, browserSyncReload)
);
cb();
}
exports.default = series(scssTask, optimizeimg,webpImage,browserSyncServer, watchTasks);
exports.build = series(scssTask,optimizeimg, webpImage);
字符串
我的顺风配置文件
module.exports = {
content: ['./assets/src/**/*.html',
'./assets/src/**/*.js',
'./assets/src/**/*.scss',
'./index.html'],
theme: {
extend: {},
},
plugins: [],
}
型
1条答案
按热度按时间jc3wubiy1#
当HTML中发生更改时,您需要重新加载页面。要应用必要的样式,您需要运行一个任务来构建它们。
字符串