Próbuję znaleźć przepływ pracy z udziałem postcs. Potrzebuję częściowych css w jednym folderze, oglądam je i wypakowuję plik css. Plik css musi zawierać plik base.css u góry.Oglądaj wiele plików css z postcsami i wypakuj plik bundle.css
postcss ma flagę --watch i może oglądać wiele plików, ale może wysyłać tylko wiele plików, a nie plik css. Mogę użyć cat, aby połączyć wszystkie pliki i użyć stdin, aby je poprowadzić do postcss. Ale nie mogę wywołać komendy cat z postcss.
Moja struktura plików może wyglądać następująco:
partials/
|_one.css
|_two.css
styles/
|_base.css
|_bundle.css
Jak bym, za pomocą KMP, zorganizować mojej sekcji skryptu korzystania z poleceń CLI, aby osiągnąć swój cel?
Moim głównym problemem jest dowiedzieć się, jak orkiestra budować kroki bez jednego kroku blokowania następnego. Link do działającego przykładu work-flow byłby świetny!
EDIT Mam roztwór roboczy, ale jest bardzo panującymi, ponieważ nie może być używany z sourcemaps, nie może mieć zmienne globalne i jest procesem dwuetapowym. Ale opiszę to tutaj w nadziei, że ktoś może zaproponować lepsze podejście.
Korzystanie z następującą strukturę:
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)
mam dwustopniowy proces w moim package.json. Najpierw upewniam się, że mam folder style/bundle (mkdir -p), a następnie uruchamiam nodemon, aby oglądać pliki css w partials /. Gdy nastąpi zmiana, nodemon działa npm run css:build.
css:build przetwarzaj pliki css w partials/i wypisz je w style/bundle/(pamiętaj, że nie wiem jak oglądać wiele plików i wypisać jeden plik w pakiecie).
Po uruchomieniu css:build, npm uruchamia postcss:build, który przetwarza plik master.css, który @ importuje pliki css z styles/bundle /. Następnie wysyłam (>) przetworzoną zawartość ze standardowego wyjścia do 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",
}
Możesz sprawdzić [Gulp] (http://gulpjs.com/) za pomocą modułu [gulp-concat] (https://www.npmjs.com/package/gulp-concat). Istnieje również moduł [gulp-postcss] (https://github.com/postcss/gulp-postcss), chociaż sam tego nie użyłem. – Wouter
Chcę uniknąć używania Gulp lub Grunt. Pracowałem z obydwoma i jestem przekonany, że mogę osiągnąć bardziej przyszłościowy przepływ pracy przy użyciu narzędzi ** npm ** i OS. Ale jestem całkiem nowy w tym podejściu i nie znam * najlepszej praktyki * dla poleceń słuchania i wyzwalania. – dotnetCarpenter
co powiesz na używanie czegoś podobnego ?: '" css: build ":" cat partials/*. Css | postcss -u lost -u postcss-cssnext | style cat/_base.css -> default.css "'. Zrobię to w jednym kroku. Ale nie dostaniesz sourcemaps, ponieważ 'postcss-cli' nie ma opcji dla map źródłowych. – hassansin