在 Rollup 中压缩 css 文件答案

【问题标题】：Gzipping css files in Rollup在 Rollup 中压缩 css 文件
【发布时间】：2021-01-16 00:14:55
【问题描述】：

我正在尝试将我的 js 和 scss 文件捆绑在汇总中以供生产使用。 Rollup 获取我所有的文件并将它们输出到构建目录，结果如下所示：

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 文件被 gzip 压缩？.

我认为我遗漏了一些相当简单的东西，我只是看不到如何让 gzipPlugin 处理 css 文件....提前感谢您提供的任何提示。

【问题讨论】：

标签： css sass gzip rollup

【解决方案1】：

我认为您只需要在 CSS 生成的插件会话中添加 gzipPlugin。

像这样：

input: "src/all.scss",
plugins: [
    scss({
        output: "build/assets/css/styles.min.css",
        outputStyle: "compressed"
    }),
    gzipPlugin()
]

【讨论】：

【解决方案2】：

我可以通过指定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。

【讨论】：