14

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

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

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

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/ 中 @import 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",
}
4

2 回答 2

4

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

于 2015-10-15T17:21:40.633 回答
3

也许您应该考虑使用webpack来构建单个 css 文件和其他也具有监视标志的资源。它非常有效，您不需要在更改资源/文件后一直手动重建。

于 2015-10-15T18:14:20.387 回答