node.js - 用 postcss 观察多个 css 文件并输出一个 bundle.css

Question

我正在尝试找出一个涉及 postcss 的工作流程。我需要将 css 部分放在一个文件夹中，观察它们并输出一个捆绑 css 文件。捆绑的 css 文件必须在顶部包含一个 base.css 文件。

postcss 有一个 --watch 标志，可以监视多个文件，但只能输出多个文件而不是捆绑 css 文件。我可以使用 cat 组合所有文件并使用 stdin 将它们通过管道传输到 postcss。但是我无法从 postcss 触发 cat 命令。

我的文件结构可能如下所示:

partials/
    |_one.css
    |_two.css
styles/
    |_base.css
    |_bundle.css

我将如何通过使用 npm 来安排我的脚本部分以使用 CLI 命令来实现我的目标？

我的主要问题是弄清楚如何协调构建步骤而不会阻止下一步。一个工作流程示例的链接会很棒!

编辑我得到了一个可行的解决方案，但它不是最理想的，因为它不能与源映射一起使用，不能有全局变量并且是一个两步过程。但我会在这里概述它，希望有人可以提出更好的方法。

使用以下结构:

build/
    |_stylesheet/
        |_default.css (final processed css)
partials/
    |_one.css
    |_one.htm (html snippet example)
    |_two.css
    |_two.htm (html snippet example)
styles/
    |_base.css
    |_bundle/ (css files from partial/ that is partly processed)
        |_one.css
        |_two.css
    |_master.css (import rules)

我的 package.json 中有两个步骤。首先，我确保我有一个样式/捆绑文件夹 (mkdir -p)，然后我开始 nodemon在 partials/中观看 css 文件。当发生变化时，nodemon 运行 npm run css:build。

css:build 在partials/中处理css文件，并在styles/bundle/中输出(记住我不知道怎么看多个文件，输出一个捆绑文件)。

在运行 css:build 之后，npm 运行 postcss:build 处理 master.css 文件，该文件从 styles/bundle/导入 css 文件。然后我将处理后的内容从 stdout 输出 (>) 到 build/stylesheet/default.css。

{
    "css": "mkdir -p styles/bundle && nodemon -I --ext css --watch partials/ --exec 'npm run css:build'",
    "css:build": "postcss --use lost --use postcss-cssnext --dir styles/bundle/ partials/*.css",
    "postcss:build": "postcss --use postcss-import --use postcss-cssnext --use cssnano styles/master.css > build/stylesheet/default.css",
}

Answer 1

您可以从 npm 查看 watch 和 parallelshell 包。我相信这两者的组合会成功。更多信息在这里:http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/