.jpg "Подарок всем front end разработчикам. grunt(Jade+Stylus+Watch)")
Здравствуйте Уважаемые хабра-пользователи!
Во-первых, всех с уже наступившем Новым Годом. Желаю Вам добра и развития в Вашей области деятельности!
Во-вторых, в качестве небольшого подарка я подготовил небольшой инструмент, которым сам пользуюсь уже порядка полугода. Данный инструмент требует минимального времени на настройку, но это никак не влияет на отдачу, которую Вы получаете от его использования.
Вопрос скорее к верстальщикам: Вам не надоело постоянно делать одно и то же?
Я опишу стандартный проект, возможно немного в негативных красках…
Средний проект у меня это 5-7 страниц в psd, которые нужно сверстать за 2-3 дня, при том что не должно пострадать качество. В эти сроки включены все правки от заказчика до его полной эйфории.
Я уверен что более продвинутые специалисты уже понимают о чем я хочу завести разговор.
Пойдет он о таком инструменте как grunt.js. Все слышали, но все боятся. Давайте сделаем проще, а если точнее — я сделаю проще Вам.
В конце статьи есть ссылка на github с проектом, остальное, что я буду рассказывать, касается более философии и немного тех. части.
Так ли необходимо повторять одни и те же участки кода, писать кучу закрывающих тегов в верстке, следить за вендорными префиксами и пр… Да даже обновлять страницу, при каждом изменении, уже лень.
Я предлагаю уйти от этого, и не страдать фигней утруждать себя.
Инструмент, который я предлагаю мало чем отличается от мануалов в интернете по обучению grunt, и если будет время, Вы можете почитать про него и сами добавить свои фишки, такие как препроцессоры, другую автоматизацию, да все что угодно.
Данный инструмент предоставляет след. возможности:
- Препроцессор stylus + nib(автоматически добавляет вендорные свойства для таких свойств как border-radius и др.)
- Препроцессор Jade(отсутствие закрывающих тегов в HTML, подключение внешних блоков)
- Watch+LiveReload(компилирует файлы из стилуса и джэйда в css и html. Автоматическое обновление страницы при изменении файлов)
- Imagemin — минификатор изобраений(ужимает без потери качества)
- Connect — Ваша верстка будет запущена на сервере(localhost:3000)
Как видите возможностей хватает, но если Вам мало, а изучать grunt нет никакого желания или возможности, отпишите мне в личку, я совершенно бесплатно его модифицирую под Вас, благо это минутное дело.
Инструкцию по установке Вы сможите найти на странице github. Задавайте вопросы в коментах, предложения, недостатки, ошибки.
Вот ссылка на проект: fewatcher
Полезные ссылки:
http://gruntjs.com/
http://jade-lang.com/
http://learnboost.github.io/stylus/
Автор: systemiv
