在汇总中压缩css文件

Question

我正在尝试将我的js和scss文件打包到汇总中，以便生产。Rollup获取我的所有文件并将它们输出到一个build中，结果如下：

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文件上工作.提前谢谢你的建议。

Answer 1

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

如下所示：

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

Answer 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，第二次在上一次运行时对bundle.css进行gzip。