Does not reducing css file with Tailwind CSS(不使用TailWind css缩小css文件)
问题描述
我正在尝试将TailWind用于我的项目。但我无法缩小我的css文件。
这是我的项目的结构:
gupfile.js:
const gulp = require('gulp');
const babel = require("gulp-babel");
const watch = require('gulp-watch');
const browserSync = require('browser-sync').create();
const environments = require('gulp-environments');
const uglifycss = require('gulp-uglifycss');
const terser = require('gulp-terser');
const postcss = require('gulp-postcss');
const purgecss = require('gulp-purgecss');
const production = environments.production;
gulp.task('watch', () => {
browserSync.init({
proxy: 'localhost:8080',
});
gulp.watch(['src/main/resources/**/*.html'], gulp.series('copy-html-and-reload'));
gulp.watch(['src/main/resources/**/*.css'], gulp.series('copy-css-and-reload'));
gulp.watch(['src/main/resources/**/*.js'], gulp.series('copy-js-and-reload'));
});
gulp.task('copy-html', () =>
gulp.src(['src/main/resources/**/*.html'])
.pipe(gulp.dest('target/classes/'))
);
gulp.task('copy-css', () =>
gulp.src(['src/main/resources/**/*.css'])
.pipe(postcss())
.pipe(production(uglifycss()))
.pipe(gulp.dest('target/classes/'))
);
gulp.task('copy-js', () =>
gulp.src(['src/main/resources/**/*.js'])
.pipe(babel())
.pipe(production(terser()))
.pipe(gulp.dest('target/classes/'))
);
gulp.task('copy-html-and-reload', gulp.series('copy-html', reload));
gulp.task('copy-css-and-reload', gulp.series('copy-css', reload));
gulp.task('copy-js-and-reload', gulp.series('copy-js', reload));
gulp.task('build', gulp.series('copy-html', 'copy-css', 'copy-js'));
gulp.task('default', gulp.series('watch'));
function reload(done) {
browserSync.reload();
done();
}
trawind.config.js:
module.exports = {
purge:
{
content: ['./src/main/resources/templates/**/*.html']
},
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Package.json:
{
"name": "tournament",
"scripts": {
"watch": "gulp watch",
"build": "gulp build",
"build-prod": "NODE_ENV='production' gulp build --env production"
},
"dependencies": {
"autoprefixer": "^10.4.0",
"postcss": "^8.3.11",
"tailwindcss": "^2.2.19"
},
"devDependencies": {
"@babel/core": "^7.16.0",
"@babel/preset-env": "^7.16.4",
"browser-sync": "^2.27.7",
"gulp": "^4.0.2",
"gulp-babel": "^8.0.0",
"gulp-environments": "^1.0.1",
"gulp-postcss": "^9.0.1",
"gulp-purgecss": "^4.0.3",
"gulp-terser": "^2.1.0",
"gulp-uglifycss": "^1.1.0",
"gulp-watch": "^5.0.1"
}
}
postcss.config.js:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}
当我运行npm run build-prod
时,我放置在目标/CLASSES/Static/css/Application.css中的css文件不会减少。我做错了什么?我尝试将gupfile.css中文件的路径从src/main/resource/**/.css更改为src/main/Resources/Static/css/.css,但无济于事。我还更改了trawind.config.js中的路径,但都是徒劳的。
推荐答案
请检查Purgecss的配置--负责删除不用的css代码-https://www.npmjs.com/package/gulp-purgecss#user-content-usage
这篇关于不使用TailWind css缩小css文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:不使用TailWind css缩小css文件
基础教程推荐
- Spring Boot Freemarker从2.2.0升级失败 2022-01-01
- 首次使用 Hadoop,MapReduce Job 不运行 Reduce Phase 2022-01-01
- 如何使用 Eclipse 检查调试符号状态? 2022-01-01
- 在螺旋中写一个字符串 2022-01-01
- 由于对所需库 rt.jar 的限制,对类的访问限制? 2022-01-01
- 如何在不安装整个 WTP 包的情况下将 Tomcat 8 添加到 Eclipse Kepler 2022-01-01
- 如何对 HashSet 进行排序? 2022-01-01
- 如何使用 Stream 在集合中拆分奇数和偶数以及两者的总和 2022-01-01
- 如何强制对超级方法进行多态调用? 2022-01-01
- Java 中保存最后 N 个元素的大小受限队列 2022-01-01