Автоматизация рабочего процесса во время верстки это одна из самых важных необходимостей, которая помогает сэкономить время и уделить больше внимания деталям. В зависимости от задачи используют различные системы сборки, я же в основном использую Gulp. Каждый год я собираюсь духом, выделяю время и начинаю обновлять свою сборку внедряя фичи, которых мне не хватало, убираю лишнее или вообще пишу все заново. Поскольку я фрилансер и не ограничен какими-либо корпоративными правилами и стайлгайдми, я решил избавиться от препроцессоров таких как sass, less и т.п, которые так прижились во многих компаниях и полностью перешел на PostCSS. Так же я решил не использовать сложных шаблонизаторовтаких как Pug, а просто инклудить необходимые куски чистого HTML. Абстракции, метаязыки, это все конечно хорошо, но мне показалось, что можно сделать все намного проще в рамках тех задач, которые передо мной стояли, а главное нативно. Написав и обкатав свою сбоку я решил ею поделиться:
iDaBuilder — Сборка Gulp + PostCSS
Как ею пользоваться можно узнать в небольшом описании там же в репозитории на gitHub. А теперь немного магии:
Командой npm run create {name} (где {name} - это название блока, который вы хотите создать) создается папка {name}, внутри неё будут созданы:
- файл {name}.html с разметкой по умолчанию
- папка images внутри которой будет создана папка {name}
- папка css внутри которой будет создан файл {name}.css.
- папка js внутри которой будет создан файл {name}.js
И все это одной командой! Представьте как легко можно перенести из другого проекта например menu или footer, вы просто копируете одну папку, а все что вам надо уже в ней. Каждый созданный файл подписан, чтобы не путаться в названиях, когда открыто с десяток вкладок с разными блоками. Конечно я изобретаю велосипед, но это мой велосипед с блекджеком и модулями...
iDaBuilder — Сборка Gulp + PostCSS
Как ею пользоваться можно узнать в небольшом описании там же в репозитории на gitHub. А теперь немного магии:
Командой npm run create {name} (где {name} - это название блока, который вы хотите создать) создается папка {name}, внутри неё будут созданы:
- файл {name}.html с разметкой по умолчанию
- папка images внутри которой будет создана папка {name}
- папка css внутри которой будет создан файл {name}.css.
- папка js внутри которой будет создан файл {name}.js
И все это одной командой! Представьте как легко можно перенести из другого проекта например menu или footer, вы просто копируете одну папку, а все что вам надо уже в ней. Каждый созданный файл подписан, чтобы не путаться в названиях, когда открыто с десяток вкладок с разными блоками. Конечно я изобретаю велосипед, но это мой велосипед с блекджеком и модулями...