Sto cercando di capire un flusso di lavoro che coinvolge postcss. Il mio bisogno è di avere partials css in una cartella, guardarli e produrre un file css in bundle. Il file css del bundle deve includere un file base.css in alto.Guarda più file css con postcss ed emetti un bundle.css
postcss ha un flag --watch e può guardare più file ma può emettere solo più file e non un file css in bundle. Posso usare cat per combinare tutti i file e usare stdin per reindirizzarli a postcss. Ma non posso attivare il comando cat da postcss.
La mia struttura dei file potrebbe essere la seguente:
partials/
|_one.css
|_two.css
styles/
|_base.css
|_bundle.css
Come potrei, utilizzando NPM, organizzare la mia sezione script per utilizzare i comandi CLI per raggiungere il mio obiettivo?
Il mio problema principale è capire come orchestrare i passi di costruzione senza bloccare uno dei passaggi successivi. Un collegamento a un esempio di flusso di lavoro funzionante sarebbe fantastico!
EDIT Ho una soluzione funzionante, ma è molto sub-ottimale in quanto non può essere utilizzato con le sourcemaps, non può avere variabili globali ed è un processo in due fasi. Ma lo traccerò qui nella speranza che qualcuno possa suggerire un approccio migliore.
Utilizzando la seguente struttura:
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)
Ho un processo in due fasi nel mio package.json. Per prima cosa mi assicuro di avere una cartella styles/bundle (mkdir -p) e quindi avvio nodemon per guardare i file css in partial /. Quando si verifica una modifica, nodemon viene eseguito npm run css:build.
css:build elaborare i file css in partials/e visualizzarli in stili/bundle/(ricordare che non so come guardare più file e generare un file in bundle).
Dopo aver eseguito css:build, npm viene eseguito postcss:build che elabora il file master.css che @import css file da styles/bundle /. Eseguo quindi (>) il contenuto elaborato da stdout a 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",
}
È possibile controllare [Gulp] (http://gulpjs.com/) con il modulo [gulp-concat] (https://www.npmjs.com/package/gulp-concat). C'è anche un modulo [gulp-postcss] (https://github.com/postcss/gulp-postcss) anche se non l'ho usato io stesso. – Wouter
Voglio evitare di usare Gulp o Grunt. Ho lavorato con entrambi e sono convinto di poter ottenere un flusso di lavoro più a prova di futuro utilizzando ** npm ** e gli strumenti del sistema operativo. Ma sono abbastanza nuovo in questo approccio e non conosco la * migliore pratica * per i comandi di ascolto e attivazione. – dotnetCarpenter
come usare qualcosa di simile ?: '" css: build ":" cat partials/*. Css | postcss -u lost -u postcss-cssnext | cat style/_base.css -> default.css "'. Lo farà in un solo passaggio. Ma non si otterranno le mappe, poiché 'postcss-cli' non ha opzioni per le mappe di origine. – hassansin