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

我试图找出涉及postcss的工作stream程。 我的需要是在一个文件夹中有css partials,看着他们,并输出一个捆绑的CSS文件。 bundle css文件的顶部必须包含一个base.css文件。

postcss有一个–watch标志,可以观看多个文件,但只能输出多个文件,而不是捆绑的css文件。 我可以使用cat结合所有的文件,并使用标准inputpipe道postcss。 但是我不能从postcss中触发cat命令。

我的文件结构可能是这样的:

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

我如何使用npm来安排我的脚本部分使用CLI命令来实现我的目标?

我的主要问题是弄清楚如何对构build步骤进行pipe理,而不是一个步骤阻塞下一步。 一个工作stream程示例的链接将是非常好的!

编辑我有一个解决scheme工作,但它是非常不理想的,因为它不能与源代码映射,不能有全局variables,是一个两步的过程。 但我会在这里概述一下,希望有人能提出一个更好的方法。

使用以下结构:

 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有两个步骤。 首先我确定我有一个styles / bundle文件夹( mkdir -p ),然后我启动nodemon来观察partials /中的css文件。 发生更改时,nodemon将运行npm run css:build

css:build在partials /下编译css文件,然后以styles / bundle /格式输出(记住我不知道如何看多个文件并输出一个捆绑文件)。

在运行css:build ,npm运行postcss:build来处理从样式/ 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", } 

你可以看看npm的watchparallelshell包。 我相信这两个组合将做的伎俩。 更多关于这里: http : //blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/

也许你应该考虑使用webpack,而不是build立一个单一的CSS文件和其他资源,也有一个手表的标志。 这是非常有效的,你不需要手动重build资源/文件更改后的所有时间。