Верстка без боли

Время от времени мне приходится заниматься нелюбимым – верстать. Порой хочется плюнуть и заплатить, чтобы мне все сделали. Но хорошие специалисты берут много, а плохие сделают сильно хуже, чем мне нужно. Поэтому я решил попробовать полюбить верстку. И помог мне в этом Gulp.

Не смотря на то, что я уже давно работаю с WebPack и его тоже можно приручить для сборки проекта с версткой, я решил пойти по более классическому пути и изучить для этого дела Gulp. Он мне показался намного проще и лаконичнее. Зачем стрелять из пушки по воробям? WebPack хорош для сборки проектов на ReactJS и прочих, но для сборки верстки вполне достаточно Gulp. Кто-то вообще предпочитает Grunt.

Gulp with BrowserSync

Итак, зачем это нужно? Gulp позволяет прогнать ваши исходники через кучу фильтров и выдать готовый к продакшену код в отдельной директории. Вы, наверное, знаете, насколько autoprefixer облегчает жизнь, какая крутая штука SCSS, зачем нужно пережимать тяжелые изображения, минифицировать код и так далее. Все это за вас делает Gulp в фоновом режиме. Ко всему прочему, он позволяет вам видеть результаты вашей верстки моментально в браузере сразу после нажатия комбинации для сохранения файла. При изменении HTML, JS или файлов типа изображений и шрифтов, страница просто перезагружается. Если же вы меняете CSS, новые стили подтягиватся по веб-сокету даже без перезагрузки страницы. В общем, эта штука нереально облегчает верстку и даже помогает полюбить ее. Единственное, для полного счастья вам нужно два монитора, либо один большой, чтобы сразу иметь открытый редактор и браузер и каждый раз не жать CMD+Tab (или Alt+Tab для тех, кто еще не в теме).

В очередной раз, когда я в долгожданные выходные взялся за свой Pet Project (да, многие не понимают, но я жду выходных не только, чтобы отдохнуть и почитать книжки, но в первую очередь чтобы поработать над своими проектами), я решил, что пора бы уделить пару часов на настройку Gulp, чтобы больше не мучаться с версткой лендингов. Например, сейчас я пытаюсь запилить продающий сайт для своего проекта в сфере электронной коммерции YouSales, который уже подходит к стадии MVP (вдруг кто чем решит помочь, пишите на d@lysenkooo.ru). Поэтому, потратив пару-тройку часов я все-таки собрал Boilerplate с поддержкой Bootstrap и Font Awesome на основе Gulp и Bower. И работает это очень круто, поэтому делюсь с вами. Хорошей верстки!