Question

我正在试图找出一个涉及postcss的工作流程。我需要在一个文件夹中有css partials，观察它们并输出一个bundle css文件。 bundle css文件必须在顶部包含一个base.css文件。

postcss有一个--watch标志，可以看多个文件但只能输出多个文件，而不能输出一个bundle 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来观看部分/中的css文件。发生更改时，nodemon将运行npm run css:build。

css:build处理partials /中的css文件并以styles / bundle /输出它们（请记住我不知道如何观看多个文件并输出一个捆绑文件）。

运行css:build后，npm运行postcss:build，它处理来自styles / bundle /的@import css文件的master.css文件。然后，我将处理过的内容从stdout输出（＆gt;）到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/

Answer 2

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

使用postcss观看多个css文件并输出bundle.css

2 个答案: