H Немножко про Gulp в черновиках Из песочницы

Всем привет. Сегодня я немножко расскажу о Феде и его опыте работы с Gulp. Статья рассчитана для джунов, а ее цель — дать примерное понимание, что такое Gulp и как он полезен при разработке. Подробное руководство по Gulp, будет чуточку позднее.

Итак. Познакомьтесь, это Федор. Он уже изучил html, немного знает про css, где-то слышал про js и уже считает себя крутым front-end разработчиком.

Но внезапно, Федор столкнулся с проблемой, что его код стал расти. Переход на препроцессоры, подключение git, заливка файлов на хостинг, оптимизация картинок, минификация css файлов, стали отнимать кучу времени. "Когда успевать писать код?" — сетовал Федор, и не нашел лучшей идеи как обратиться к самому гениальному решению, когда-либо придуманному человечеством...

После беглого пролистывания инфы про непонятные grant'ы и еще более непонятные webpack'и, Федор нашел то, что искал, а именно — Gulp ибо он обещал Феде сделать практически все, кроме увеличения чл… интеллекта.

Что же именно обещал сделать Gulp для Феди?

• Первой проблемой Феди, было постоянные и утомительные обновления браузера, после каждого изменения в коде, дабы проверить свой результат. Его клавиша F5 была настолько стерта, что он и видеть ее перестал, а Gulp предложил ему мало того, что самостоятельно обновлять браузер после сохранения кода, так еще и создать мини сервер для всего этого.
• Еще одной проблемой было преобразовывать sass файлы в css. Конечно, Федя нашел крутую прогу Koala, которая это довольно быстро делала, но ее приходилось постоянно запускать и настраивать под нужные файлы, а Gulp только ухмыльнулся и пообещал делать тоже самое, да еще и склеивать все, автопрефиксы расставлять, и даже попутно минифицировать сss файлы одной командой.
• Картинки — вечная боль Феди, ведь большая картинка убивает скорость и производительность, а редактировать каждую — времени не запасешься. Федя вроде бы даже нашел прогу, которая обещала делать это скопопом, но Gulp пообещал делать тоже самое, да еще и одновременно подписи к картинкам подставлять, одной командой.
• Еще одной рутиной, было выводить свой продукт на продакшн и заливать все на хостинг. «NO!» Сказал Gulp и Федя забыл об этой рутине.
• Gulp, не сказал Феди всего того, что он умеет, ибо на данном развитии Феди, как разработчика, ему многое и не нужно, но со временем, если Федя не перестанет расти, то он пойме, как сильно Gulp способен автоматизировать его процессы.

Gulp — это некий js миксер, в который ты кидаешь свои картинки, sass и html файлы, да все что угодно, нажимаешь на кнопку и получаешь на выходи первоклассный, собранный и оптимизированный сок.

Конечно, по хорошему, прежде чем использовать Gulp, Феди не помешали бы знания основ nodejs, понимания npm и реализации многопоточных сервисов, но Федя может восполнить эти пробелы и в будущем, ибо эти знания не критичны для понимания такого удобного инструмента как Gulp.

У Gulp уже довольно огромное сообщество, которое помогает создавать все новые и новые плагины, для решения совершенно разных задач и останавливаться оно не намеренно. Поэтому, в особенности джуну, который только-только начал прокладывать шаги в такой интересной, технологической области, как Web, особенно полезно будет освоить такой эффективный инструмент, как Gulp.

Всем спасибо.

Ссылки на полезные материалы про Gulp.

• Официальный сайт Gulp.
• Прекрасное видео про первые шаги в Gulp.
• Замечательная статья на hubr.
• И еще одна замечательная статья.
• И еще одна замечательная статья.
• Крутой репозиторий сборок gulp файлов.