perf: 优化css 压缩

build/gulpfile.base.js → build/gulpfile.base.ts

@@ -1,5 +1,7 @@
 import gulp from 'gulp'
-import gulpCssmin from 'gulp-cssmin'
+import cleanCSS from 'gulp-clean-css'
+import consola from 'consola'
+import chalk from 'chalk'
 import { deleteSync } from 'del'
 
 // 打包配置
@@ -18,7 +20,15 @@ export const copyfont = () =>
 export const minifontCss = () =>
 	gulp
 		.src(`${config.input}fonts/*.css`)
-		.pipe(gulpCssmin())
+		.pipe(
+			cleanCSS({}, (details) => {
+				consola.success(
+					`${chalk.cyan(details.name)}: ${chalk.yellow(
+						details.stats.originalSize / 1000
+					)} KB -> ${chalk.green(details.stats.minifiedSize / 1000)} KB`
+				)
+			})
+		)
 		.pipe(gulp.dest(`${config.output}/fonts`))
 
 // 删除之前css打包文件

build/gulpfile.prod.ts

@@ -1,6 +1,9 @@
 import { src, dest, series, parallel } from 'gulp'
 import autoprefixer from 'gulp-autoprefixer'
-import cssmin from 'gulp-cssmin'
+import cleanCSS from 'gulp-clean-css'
+import consola from 'consola'
+import chalk from 'chalk'
+
 import path from 'path'
 
 // 基础方法
@@ -19,7 +22,15 @@ const compile = () =>
 				overrideBrowserslist: ['last 2 versions'],
 			})
 		)
-		.pipe(cssmin())
+		.pipe(
+			cleanCSS({}, (details) => {
+				consola.success(
+					`${chalk.cyan(details.name)}: ${chalk.yellow(
+						details.stats.originalSize / 1000
+					)} KB -> ${chalk.green(details.stats.minifiedSize / 1000)} KB`
+				)
+			})
+		)
 		.pipe(dest(config.output))
 
 export default series(clean, parallel(compile, copyfont, minifontCss))

build/gulpfile.rem.ts

@@ -1,6 +1,8 @@
 import { src, dest, series, parallel } from 'gulp'
 import autoprefixer from 'gulp-autoprefixer'
-import cssmin from 'gulp-cssmin'
+import cleanCSS from 'gulp-clean-css'
+import consola from 'consola'
+import chalk from 'chalk'
 import postcss from 'gulp-postcss'
 import pxtorem from 'postcss-pxtorem'
 
@@ -28,7 +30,15 @@ const compile = () =>
 				}),
 			])
 		)
-		.pipe(cssmin())
+		.pipe(
+			cleanCSS({}, (details) => {
+				consola.success(
+					`${chalk.cyan(details.name)}: ${chalk.yellow(
+						details.stats.originalSize / 1000
+					)} KB -> ${chalk.green(details.stats.minifiedSize / 1000)} KB`
+				)
+			})
+		)
 		.pipe(dest(config.output))
 
 export default series(clean, parallel(compile, copyfont, minifontCss))

package.json

@@ -56,6 +56,7 @@
 		"@typescript-eslint/parser": "^5.33.0",
 		"@vitejs/plugin-vue": "^3.0.1",
 		"@vue/tsconfig": "^0.1.3",
+		"chalk": "^5.0.1",
 		"consola": "^2.15.3",
 		"cz-conventional-changelog": "^3.3.0",
 		"cz-customizable": "^6.9.1",
@@ -70,7 +71,7 @@
 		"eslint-plugin-vue": "^9.3.0",
 		"gulp": "^4.0.2",
 		"gulp-autoprefixer": "^8.0.0",
-		"gulp-cssmin": "^0.2.0",
+		"gulp-clean-css": "^4.3.0",
 		"gulp-postcss": "^9.0.1",
 		"gulp-sass": "^5.1.0",
 		"husky": "^8.0.1",
@@ -94,6 +95,7 @@
 		"stylelint-order": "^5.0.0",
 		"stylelint-scss": "^4.3.0",
 		"typescript": "^4.7.4",
+		"vite": "^3.0.7",
 		"vite-plugin-inspect": "^0.6.0",
 		"vitepress": "^1.0.0-alpha.4",
 		"vitepress-theme-demoblock": "^1.4.2"