不使用TailWind css缩小css文件 [英] Does not reducing css file with Tailwind 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文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！