J'essaie de comprendre un flux de travail impliquant postcss. Mon besoin est d'avoir des partiels de css dans un dossier, les regarder et produire un dossier de css de paquet. Le fichier css du bundle doit inclure un fichier base.css en haut. Postcss possède un indicateur --watch et peut regarder plusieurs fichiers mais ne peut sortir que des fichiers multiples et pas un fichier css groupé. Je peux utiliser cat pour combiner tous les fichiers et utiliser stdin pour les rediriger vers postcss. Mais je ne peux pas déclencher la commande cat de postcss.Regarder plusieurs fichiers CSS avec postcss et de sortie un bundle.css
Ma structure de fichiers pourrait ressembler à ceci:
partials/
|_one.css
|_two.css
styles/
|_base.css
|_bundle.css
Comment puis-je, à l'aide NPM, arranger ma section de script pour utiliser des commandes CLI pour atteindre mon objectif?
Mon problème principal est de comprendre comment orchestrer les étapes de construction sans bloquer le suivant. Un lien vers un exemple de flux de travail serait génial!
EDIT J'ai une solution qui fonctionne, mais elle est très sous-optimale car elle ne peut pas être utilisée avec des sources, ne peut pas avoir de variables globales et est un processus en deux étapes. Mais je vais le décrire ici dans l'espoir que quelqu'un puisse proposer une meilleure approche.
En utilisant la structure suivante:
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)
J'ai un processus en deux étapes dans mon package.json. D'abord je m'assure que j'ai un dossier de styles/bundle (mkdir -p) et puis je commence nodemon pour regarder les dossiers de css dans partials /. Quand une modification se produit, nodemon s'exécute npm run css:build.
css:build traiter les fichiers css en partiels/et les sortir dans styles/bundle/(rappelez-vous que je ne sais pas comment regarder plusieurs fichiers et sortir un fichier groupé).
Après l'exécution de css:build, npm exécute postcss:build qui traite le fichier master.css que les fichiers @import css proviennent de styles/bundle /. Je produis ensuite (>) le contenu traité depuis stdout vers 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",
}
Vous pouvez consulter [Gulp] (http://gulpjs.com/) avec le module [gulp-concat] (https://www.npmjs.com/package/gulp-concat). Il y a aussi un module [gulp-postcss] (https://github.com/postcss/gulp-postcss) bien que je n'en aie pas utilisé moi-même. – Wouter
Je veux éviter d'utiliser Gulp ou Grunt. J'ai travaillé avec les deux et suis convaincu que je peux réaliser un flux de travail plus à l'épreuve du futur en utilisant les outils ** npm ** et OS. Mais je suis assez nouveau dans cette approche et je ne connais pas la * meilleure pratique * pour écouter et déclencher des commandes. – dotnetCarpenter
pourquoi ne pas utiliser quelque chose comme ça?: '" Css: build ":" cat partials/*. Css | postcss -u perdu -u postcss-cssnext | cat styles/_base.css -> default.css "'. Va le faire en une étape. Mais vous n'aurez pas de sourcemaps, car 'postcss-cli' n'a pas d'option pour les cartes sources. – hassansin