Уважать себя! Используйте Gulp.

Уважать себя! Используйте Gulp.

Создавать веб-сайты стало намного проще.

Когда дело доходит до веб-разработки, есть чему поучиться.

Возможно, кто-то посоветовал вам использовать префиксы поставщиков для кросс-браузерной совместимости, минимизировать код для уменьшения времени загрузки или использовать линтер, чтобы ваши CSS и JavaScript следовали лучшим практикам. Возможно, кто-то спорил о том, что использование SCSS лучше, чем использование CSS, или о том, почему механизмы создания шаблонов сейчас в моде. Или, может быть, вы впервые слышите об этом и понятия не имеете, какую настройку использовать.

Попытка найти «правильный путь» может быть пугающей. Уважайте свой рассудок и свое время: Gulp спасет и то, и другое.

Gulp - это программа, которую вы можете использовать для автоматизации всего, что связано с разработкой вашего проекта. Это называется системой сборки, инструментом сборки или средством выполнения задач. Вместо того, чтобы запоминать восемь малоизвестных команд для запуска вашего проекта, Gulp позволяет вам использовать одну. Философия Gulp заключается в том, что должно быть легко объединить несколько программ в одну единую задачу.

Gulp делает все, кроме написания кода за вас.

Это потрясающе! С тех пор, как я научился его использовать, моя продуктивность резко возросла, как и качество моего кода.

Итак, как это работает? Уловка с Gulp заключается в том, что он очень мало делает сам по себе. Вся его мощь исходит от огромной библиотеки плагинов, которую можно относительно легко объединить в цепочку, используя конфигурации в файле с именем Gulpfile.js. Позволь мне привести пример:

Когда Джефф Хилнбранд и я вместе начали Minimill, я знал, что нам понадобится надежный веб-рабочий процесс, чтобы он был эффективным и согласованным, поэтому я создал шаблон проекта с открытым исходным кодом, который использует Gulp. Наш Gulpfile позволяет нам:

• Установите проект всего тремя командами.
• Используйте Handlebars.js, чтобы наш HTML был организован по шаблонам и частям.
• Используйте SCSS, чтобы наш CSS был организован в логические части.
• Используйте Autoprefixer для автоматической вставки префиксов браузера там, где это необходимо для обеспечения кроссбраузерной совместимости.
• Используйте Browsersync, чтобы автоматически запускать разрабатываемую версию нашего веб-сайта, перезагружать страницу всякий раз, когда мы меняем HTML, и вносить изменения в CSS, JavaScript и изображения с необходимостью перезагрузки.
• Используйте HTML Minifier, CSSNano, UglifyJS и ImageMin для сжатия и оптимизации HTML, CSS, JavaScript и изображений соответственно.
• Используйте SCSS-Lint, JSHint и JSCS для выполнения линтинга и проверки стиля в наших файлах SCSS и JavaScript.

Все с помощью одной команды с терминала:

gulp serve

Трудно описать, насколько Gulp может расширить возможности для тех, кто его не пробовал. Он избавляет от всех хлопот, стресса и путаницы при веб-разработке, позволяя вам использовать всю мощь своей библиотеки плагинов, не беспокоясь о том, как использовать каждую отдельную программу. Благодаря потоковому процессу сборки и более логичному синтаксису Gulpfile, он значительно улучшает удобство использования средств сборки.

Начать сейчас!

Продано? Бросьте то, что вы делаете, и попробуйте Gulp. Позже вы поблагодарите себя за все время, которое вы сэкономили. Вот как:

• Клонируйте мой шаблон проекта и возитесь с ним! Следуйте инструкциям по установке в файле README и посмотрите, как это выглядит. Если у вас есть какие-либо проблемы, не стесняйтесь твитнуть мне или сообщить о проблеме.
• Попробуйте это руководство, чтобы начать работу с Gulp. За ним легко следить и не пропускать никаких шагов.
• Начните с нуля, используя 4-шаговое руководство по установке Gulp, а затем установите любые плагины, которые вам понравятся.

Альтернативы Gulp

До Gulp было множество инструментов сборки, которые, возможно, лучше подходят для нужд вашего проекта. Вот две популярные альтернативы (и почему вы можете выбрать вместо этого Gulp):

"Делать"

Самым старым инструментом сборки, который все еще активно используется сегодня, является программа Make, которая предустановлена ​​в Linux и Mac OSX. Make создан для проектов, которые компилируются по частям, особенно для проектов C и C ++. В своем Makefile вы создаете дерево зависимостей и записываете команды bash для создания каждого файла из его частей. Если какая-либо из зависимостей файла изменяется, Make знает, что нужно запускать только команды, необходимые для восстановления конечного продукта из измененных файлов.

Make не имеет понятия «Make plugin», потому что все, что он делает, это запускает команды bash, так что все, что вы можете делать со своего терминала, вы можете делать из Make.

Это популярный выбор для многих разработчиков и важный инструмент для изучения. Но если вы работаете над веб-проектом, Gulp упрощает выполнение задач, связанных с веб-разработкой.

Грунт

Более близким родственником Gulp является Grunt, инструмент сборки, который популяризировал систему на основе плагинов. В отличие от Gulp, плагины Grunt разработаны для часто используемых задач, каждая из которых настраивается в Gruntfile.

Gulp был разработан, чтобы облегчить многие раздражения, связанные с Grunt. Во-первых, Gulp использует потоки Node.js для подключения каждого плагина к следующему. Это означает, что задачи в Gulp выполняются быстрее, поскольку потоки устраняют необходимость создания временных файлов на каждом этапе процесса сборки. Философия Gulp код вместо конфигурации делает Gulpfiles более интуитивно понятным, чем Gruntfiles. Вместо того, чтобы писать строки и строки конфигураций (что является стандартом для Gruntfiles), Gulp заставит вас создавать задачи, используя плагины в качестве строительных блоков, перенаправляя один плагин в другой. Для многих это вопрос предпочтений, но если вы выбираете свой первый инструмент сборки, Gulp - это то, что вам нужно.