Есть два инструмента, которые получили популярность за последний год — Gulp и Grunt.
Grunt был первым, получившим известность и старается предоставить встроенную функциональность чтобы охватить все типовые случаи использования. Он следует подходу на основе конфигурации.
Gulp с другой стороны предлагает очень мало из коробки, вместо этого предпочитая переложить функциональность на множество небольших плагинов с одной функцией. Gulp применяет потоки плагинов для создания комплексного рабочего процесса.
Хотя оба инструмента могут выполнять задачи параллельно, Gulp делает это по умолчанию, пытаясь достичь многократного параллелизма — работает так много задач, насколько это возможно, при этом соблюдаются такие вещи, как зависимость между задачами.
Посмотрите, что вы можете автоматически делать с помощью Gulp: минимизировать CSS и JavaScript; сжимать и оптимизировать изображения; компилировать файлы Sass, CoffeeScript, Jade; автоматически перезагружать браузер, вместо обновления вручную через F5.
Вы можете заставить Gulp перезагрузить или обновить браузер, когда вы или что-то ещё, вроде задачи Gulp, изменяют файл. Есть два способа сделать это. Первый заключается в применении плагина LiveReload, а второй в использовании BrowserSync.
Как уже упоминалось, Gulp является одним из немногих инструментов сборки, доступных на JavaScript. Также есть и другие инструменты сборки, написанные не на JavaScript, тот же Rake. Почему вы должны выбрать Gulp?
Gulp является системой сборки, которая может упростить разработку сайтов путём автоматизации типовых задач, таких как компиляция CSS-препроцессоров, минимизация JavaScript и перезагрузка браузера. В этом руководстве мы увидим, как использовать Gulp для изменения вашего рабочего процесса, чтобы сделать его более быстрым и эффективным.
Ниже приведены некоторые интересные статьи, которые понадобятся нам в этом руководстве.
Установка Gulp
Установка Gulp довольно простая. Для начала установите пакет Gulp глобально:
npm install -g gulp
Затем установите его в свой проект:
npm install --save-dev gulp
Использование Gulp
Давайте создадим задачу Gulp для минимизации одного из наших файлов JavaScript. Создайте файл с именем gulpfile.js. В нём будут определяться ваши задачи, которые запускаются с помощью команды gulp.