Я пытаюсь выяснить рабочий процесс с участием postcss. Мне нужно иметь частичные части css в одной папке, смотреть их и выводить файл css-пакета. Файл css пакета должен содержать файл base.css вверху.Смотрите несколько файлов css с postcss и выведите файл bundle.css
postcss имеет флаг -watch и может просматривать несколько файлов, но может выводить только несколько файлов, а не файл css-пакета. Я могу использовать cat, чтобы объединить все файлы и использовать stdin для их отправки в postcss. Но я не могу запустить команду cat из postcss.
Мои файлы структура может выглядеть следующим образом:
partials/
|_one.css
|_two.css
styles/
|_base.css
|_bundle.css
Как бы я, используя НПМ, организовать мой раздел сценария для использования интерфейса командной строки для достижения своей цели?
Моя основная проблема заключается в том, чтобы выяснить, как оркестровать шаги сборки без одного шага, блокирующего следующий. Ссылка на рабочий рабочий пример будет отличной!
EDIT У меня есть решение, но оно очень субоптимально, поскольку оно не может использоваться с исходными кодами, не может иметь глобальных переменных и является двухэтапным процессом. Но я опишу его здесь в надежде, что кто-то может предложить лучший подход.
Используя следующую структуру:
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. Сначала я убеждаюсь, что у меня есть папка стилей/пакетов (mkdir -p), а затем я начинаю nodemon, чтобы посмотреть файлы css в partials /. Когда происходит изменение, nodemon запускает npm run css:build.
css:build обрабатывает файлы css в partials/и выводит их в стилях/комплекте/(помните, что я не знаю, как смотреть несколько файлов и выводить один связанный файл).
После запуска css:build npm запускает postcss:build, который обрабатывает файл master.css, который @import css-файлы из styles/bundle /. Затем я вывожу (>) обработанный контент из stdout для сборки/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] (http://gulpjs.com/) с помощью модуля [gulp-concat] (https://www.npmjs.com/package/gulp-concat). Существует также модуль [gulp-postcss] (https://github.com/postcss/gulp-postcss), хотя я сам его не использовал. – Wouter
Я хочу избежать использования Gulp или Grunt. Я работал с обоими и убежден, что я могу добиться более продолжительного потока работы с помощью ** npm ** и инструментов ОС. Но я довольно новичок в этом подходе и не знаю * лучшей практики * для прослушивания и запуска команд. – dotnetCarpenter
как об использовании чего-то вроде этого ?: '" css: build ":" cat partials/*. Css | postcss -u lost -u postcss-cssnext | cat styles/_base.css -> default.css ". Сделаем это за один шаг. Но вы не получите исходные карты, так как 'postcss-cli' не имеет возможности для исходных карт. – hassansin