Gulp

Gulp

Есть два инструмента, которые получили популярность за последний год — Gulp и Grunt.

Grunt был первым, получившим известность и старается предоставить встроенную функциональность чтобы охватить все типовые случаи использования. Он следует подходу на основе конфигурации.

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

Хотя оба инструмента могут выполнять задачи параллельно, Gulp делает это по умолчанию, пытаясь достичь многократного параллелизма — работает так много задач, насколько это возможно, при этом соблюдаются такие вещи, как зависимость между задачами.

Автоматизация работы с Gulp

Посмотрите, что вы можете автоматически делать с помощью Gulp: минимизировать CSS и JavaScript; сжимать и оптимизировать изображения; компилировать файлы Sass, CoffeeScript, Jade; автоматически перезагружать браузер, вместо обновления вручную через F5.

Перезагрузка браузера при изменениях

Вы можете заставить Gulp перезагрузить или обновить браузер, когда вы или что-то ещё, вроде задачи Gulp, изменяют файл. Есть два способа сделать это. Первый заключается в применении плагина LiveReload, а второй в использовании BrowserSync.

Почему Gulp?

Как уже упоминалось, Gulp является одним из немногих инструментов сборки, доступных на JavaScript. Также есть и другие инструменты сборки, написанные не на JavaScript, тот же Rake. Почему вы должны выбрать Gulp?

Сборка с Gulp

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

Узнайте больше о Gulp

Ниже приведены некоторые интересные статьи, которые понадобятся нам в этом руководстве.

Установка и использование Gulp

Установка Gulp

Установка Gulp довольно простая. Для начала установите пакет Gulp глобально:

npm install -g gulp

Затем установите его в свой проект:

npm install --save-dev gulp

Использование Gulp

Давайте создадим задачу Gulp для минимизации одного из наших файлов JavaScript. Создайте файл с именем gulpfile.js. В нём будут определяться ваши задачи, которые запускаются с помощью команды gulp.