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