13
我试图找出涉及postcss的工作流程。我的需求是在一个文件夹中放入css分支，观看它们并输出一个捆绑的css文件。包的CSS文件必须在顶部包含一个base.css文件。使用postcss观察多个css文件并输出一个bundle.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两个步骤。首先我确定我有一个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",
}
您可以使用[gulp-concat]（https://www.npmjs.com/package/gulp-concat）模块查看[Gulp]（http://gulpjs.com/）。还有一个[gulp-postcss]（https://github.com/postcss/gulp-postcss）模块，尽管我自己并没有使用那个模块。 – Wouter
我想避免使用Gulp或Grunt。我曾与两位工作人员合作，并相信我可以通过使用** npm **和OS工具来实现更具前景的工作流程。但我对这种方法很陌生，不知道用于侦听和触发命令的最佳做法。 – dotnetCarpenter
如何使用类似这样的东西？：''css：build“：”cat partials/*。css | postcss -u lost -u postcss-cssnext | cat styles/_base.css - > default.css“'。将一步完成。但是你不会得到源地图，因为'postcss-cli'没有选择源地图的选项。 – hassansin