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

Question

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

postcss有一个--watch标志,可以看多个文件,但只能输出多个文件,而不能输出bundle css文件.我可以cat用来组合所有文件并使用stdin将它们传递给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来观察部分/中的css文件.发生更改时,nodemon会运行npm run css:build.

css:build 处理部分/中的css文件并以styles/bundle /输出它们(请记住,我不知道如何观看多个文件并输出一个捆绑文件).

运行后css:build,npm运行postcss:build处理来自styles/bundle /的@import css文件的master.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/