如何解决在汇总中压缩CSS文件
我正在尝试将我的js和scss文件捆绑在一起,以准备生产。 汇总将我的所有文件输出到构建目录,结果如下:
build
css
bundle.css
js
bundle.js
bundle.js.gz
如您所见,我正在将gzipPlugin
用于我的js文件。
我也想使用gzipPlugin
处理CSS,但是我不知道该怎么做。
我当前的设置如下:
import babel from "rollup-plugin-babel";
import { terser } from "rollup-plugin-terser";
import multi from "@rollup/plugin-multi-entry";
import gzipPlugin from "rollup-plugin-gzip"
import scss from "rollup-plugin-scss"
import del from "rollup-plugin-delete"
export default [{
input: "src/**/*.logic.js",output: {
file: "build/assets/js/main.min.js",format: "umd",name: "Logic"
},plugins: [
del({ targets: "build" }),gzipPlugin(),terser({
output: {
wrap_iife: false
}
}),multi({
exports: true
}),babel({
exclude: "node_modules/**"
})
]
},{
input: "src/all.scss",plugins: [
scss({
output: "build/assets/css/styles.min.css",outputStyle: "compressed"
}),]
}
];
我的问题是: 如何将输出的css文件压缩?。
我想我很简单地缺少了一些东西,只是看不到如何使gzipPlugin在css文件上工作...。在此先感谢任何提示。
解决方法
我认为您只需要在 CSS 生成的插件会话中添加 gzipPlugin。
像这样:
input: "src/all.scss",plugins: [
scss({
output: "build/assets/css/styles.min.css",outputStyle: "compressed"
}),gzipPlugin()
]
,
我可以通过指定 additionalFiles
选项来完成此操作:
// rollup.config.js
...
import gzipPlugin from "rollup-plugin-gzip";
import css from "rollup-plugin-css-only";
export default {
input: "src/main.js",output: {
...
file: "public/build/bundle.js",},plugins: [
gzipPlugin({
additionalFiles: ["./public/build/bundle.css"],}),css({ output: "bundle.css" }),...
]
}
我遇到的一个小怪癖是构建必须运行两次。第一次不使用 gzip 生成 bundle.css
,第二次使用 gzip 上次运行的 bundle.css
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。