Gulp. Часть 1. Зачем он нужен? :: Блог веб разработчика

Что вообще такое Gulp?

О том что такое Gulp, наверное, не писал только ленивый и, тем не менее, все чаще я слышу один и тот же вопрос: Зачем вообще использовать Gulp? В чем дзен то?

Итак, объясняю на пальцах:

Допустим, вы верстальщик (для примера). Верстаете какой-то проект в котором вам понадобилось комплировать LESS в CSS. Что вы делаете? Правильно, ищите плагин для вашей любимой IDE, настраиваете его и запускаете. Далее вам внезапно понадобилось автоматически собирать спрайты (ведь вручную их делать в фотошопе довольно муторное занятие, поверьте, я знаю). Вы снова ищите плагин для своей любимой IDE, но не находите (скорее всего). Ищите стороннее решение, находите, например скрипт на питоне для автоматического создания спрайтов, долго его устанавливаете и настраиваете (с питоном то вы не бум-бум) и наконец запускаете. Далее вам может понадобиться компилировать, например React.js, так же автоматически. Вы снова ищите плагин под свою IDE, может быть даже находите.

Вроде все работает как надо, так в чем проблема то?

И тут у вас появляется второй проект, который требует всего того же самого, плюс/минус небольшие изменения. И что? Копировать настройки всех плагинов или заного их настраивать? А если вы завтра смените IDE или отдадите проекту другому верстальщику? Вот тут то и помогут таск-менеджеры.

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

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

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

Далее: Часть 2. Установка Gulp

akuma.su

Grunt или Gulp | Блог | Разработка и дизайн сайтов и мобильных приложений

Grunt и Gulp являются инструментами для сборки веб-приложений, призванными автоматизировать повторяющиеся процессы вроде конкатенации (склеивания) файлов, сжатия картинок, таблиц стилей и файлов JavaScript. В этой статье мы попытались разобраться, в чем различие между Grunt и Gulp.


Из двух этих сборщиков Gulp является более новым и, соответственно, в нем разработчики попытались избавиться от недостатков Grunt:

  1. Задачи Grunt работают с файлами вместо потоков данных: чтобы запустилась следующая задача предыдущая должна записать свои результаты в файл. Gulp же работает с потоком данных и обращается к файловой системе только по началу/завершению своих задач.
  2. В Gulp нет необходимости в плагине watch, потому как возможность реагировать на изменения в файлах уже включена в ядро. Это то что должно быть в любом сборщике сразу, а не выполнятся с помощью плагина.
  3. Конфигурационные файлы Grunt напоминают объект JSON, Gulp же использует более простой JavaScript-код, который в итоге более понятен на больших проектах.

Тем не менее, давайте оценим преимущества и недостатки этих сборщиков для frontend-разработчиков с точки зрения трех параметров: порога вхождения, скорости и производительности и наличии плагинов.

Порог вхождения

Если говорить о начале работы, то начало работы с Grunt несколько проще, но обратная сторона этой медали — это сложность чтения настроек готовых проектов. Gulp лишен этого недостатка: таски в нем так же легко читать, как и писать. Но при достаточной практике эта разница не так заметна.

Пример файла Grunt для минимизации HTML-файла:

require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks 
 
grunt.initConfig({
    minifyHtml: {
        options: {
            cdata: true
        },
        dist: {
            files: {
                'dist/index.html': 'src/index.html'
            }
        }
    }
});
 
grunt.registerTask('default', ['minifyHtml']);

Пример файла Gulp для минимизации HTML-файла:

// including plugins
var gulp = require('gulp')
, minifyHtml = require("gulp-minify-html");
 
// task
gulp.task('minify-html', function () {
    gulp.src('./Html/*.html') // path to your files
    .pipe(minifyHtml())
    .pipe(gulp.dest('path/to/destination'));
});

Таски в Grunt настраиваются в конфигурационном объекте внутри Grunt-файла, в то время как для написания тасков в Gulp используется синтаксис в стиле Node.


Что производительней: Grunt или Gulp?

В Gulp используется концепция потоков: представьте себе, что файлы проходят сквозь «трубу» (pipe) и в разных ее точках с ними выполняются те или иные действия:

Таким способом можно, например, вставить все JavaScript-файлы в pipe скриптов, который:

  1. Объединяет все файлы в один.
  2. Удаляет console и debugger.
  3. Минимизирует код.
  4. Сохраняет результирующий код по указанному адресу.

В Grunt для выполнения этих задач используется wrapper-функция. При этом для обеспечения многопоточности и кэширования файлов приходится ставить дополнительные плагины grunt-concurrent и grunt-newer:

npm install grunt-concurrent --save-dev
npm install grunt-newer --save-dev

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

  1. Передача callback.
  2. Возвращение потока.
  3. Возвращение promise.

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

Плагины

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


grunt-contrib-watch — запускает таски, когда изменяются отслеживаемые файлы.

grunt-contrib-jshint — выполняет валидацию JavaScript-файлов.

grunt-mocha — используется для тестирования с помощью фреймворка Mocha.

grunt-notify — автоматически показывает сообщение при ошибке таска.

grunt-contrib-uglify — минимизирует файлы с помощью UglifyJS.

Все они имеются и у Gulp. Также для Gulp существует плагин gulp-grunt, который позволяет запускать файлы Grunt. Он не создает поток, а вызывается как аргумент:

var gulp = require('gulp');
require('gulp-grunt')(gulp); // add all the gruntfile tasks to gulp 
 
// continue defining tasks... 
gulp.task('do-this', function() {
  ...
});
 
// run them like any other task 
gulp.task('default', [
  // run complete grunt tasks 
  'grunt-minify',
  'grunt-test',
  // or run specific targets 
  'grunt-sass:dist',
  'grunt-browserify:dev'
]);

Учитывая все вышесказанное, какой сборщик выбрать: Grunt или Gulp? Во-первых, мы не советуем вам переходить на Gulp или Grunt просто потому, что кто-то пытается убедить вас в необычайных преимуществах одного из них. Различия не так важны, если лично вам неудобно работать с расхваленным сборщиком.

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

Gulp, в свою очередь, очень гибок. Он, конечно, младше, но сейчас для него есть уже все основные плагины, имеющиеся у Grunt. Кроме того, возможность синхронно выполнять таски — это то, что нужно, если вы работаете с большим количеством файлов. Но если вы ранее не использовали NodeJS, на первых порах у вас могут возникнуть некоторые сложности с потоками.

Как видим, выбор между Grunt и Gulp это в большей мере вопрос личных предпочтений. Если вы никогда не работали со сборщиками, еще раз взвесьте все «за» и «против» выше — они помогут определиться с выбором инструмента для автоматизации вашей работы.

Нужен MVP, разработка под iOS, Android или прототип приложения? Ознакомьтесь с нашим портфолио и сделайте заказ уже сегодня!

Об авторе

Front-end разработчик

Толя занимался версткой и фронтэнд-проектами студии.

Похожие статьи

Вернуться к списку записей
К списку записей

stfalcon.com

Gulp — автоматизация процесса разработки

Значимую роль в технологиях веб-разработки приобрели система автоматизации процесса разработки. Наиболее известные из них — это старичок Grunt и более молодой Gulp, который отличается более простым и понятным синтаксисом.

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

Потому что она может:

  • Автоматически перезагружать браузер при любых изменениях в файлах проекта (более не надо затирать клавиши Ctrl/Cmd+R)
  • Сжимать и склеивать скрипты и стили
  • Проверять скрипты и стили на ошибки
  • Использовать различные препроцессоры — SASS/LESS/Stylus, Jade и так далее.
  • Оптимизировать изображения

Конечно, возможностей больше. Здесь лишь перечислены основные из них.

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

Установка

Устанавливается Gulp при помощи NPM (Node Package Manager).

Подразумевается под тем, что вы уже установили Node.JS на свой компьютер. Или, по-крайней мере, знаете, как это сделать.

Если ещё не установили, то обязательно пройдите по ссылке. Скачайте установщик для вашей операционной системы и установите его.

Устанавливаем Gulp:

npm install gulp -g

Структура папок в проекте носит произвольный характер. Здесь указана такая структура, которая удобна автору статьи.

Перейдём в директорию с проектом и создадим пустой файл для конфигурации.

touch gulpfile.js

Теперь нам необходимо установить все дополнительные пакеты, которые мы будем использовать по ходу автоматизации рабочего процесса.

sudo npm install gulp-jade gulp-stylus gulp-coffee gulp-livereload nib gulp-imagemin gulp-uglify gulp-concat connect connect-livereload serve-static --save-dev

Конфигурация

Приступаем к настройке файла конфигурации gulpfile.js, который мы создали в корневом каталоге проекта.

После сохранения файла, в консоли, находясь в папке проекта, запустите команду gulp.

 

Тестовый проект с уже созданными файлами для Stylus, Jade и CoffeeScript можно скачать по адресу:

 

Если у вас есть какие-либо вопросы по этой теме, задавайте их в комментариях.

codemotion.ru

Gulp. Введение.

Вы здесь:
Главная — JavaScript — JavaScript Основы — Gulp. Введение.


Всем привет! Это первая статья из серии, где мы рассмотрим, что такое Gulp, в чем причина его популярности, как его установить и настроить, а также некоторые другие детали.

Что такое Gulp?

Итак, Gulp – это сборщик проектов, написанный на NodeJS. Он позволяет быстро создать нужную структуру проекта, скачать и подключить нужные фреймворки или библиотеки, следить за файлами и, если они обновились, что-нибудь с ними делать. Например, вы можете писать код на Sass , а после сохранения файла Gulp сам проверит, есть ли изменения, и, если они есть, скомпилирует .sass файл в .css файл и обновит браузер на всех подключенных к сети устройствах, чтобы вы могли проверить, как ваш проект отображается на разных разрешениях экрана и разных операционных системах.

В чем причина его популярности?

Так как Gulp написан на NodeJS, все его настройки можно очень легко производить при помощи обычных javascript функций. Если вы уже знаете javascript, то зачем вам учить еще один язык программирования? Именно так подумали создатели платформы NodeJS, а на ее основе уже был создан Gulp. Помимо всего прочего, для данного сборщика проектов уже есть множество модулей, которые значительно облегчат вам написание кода.

Установка

Итак, давайте рассмотрим, как установить Gulp. Делается это очень просто!

Во-первых, убедитесь, что у вас установлена платформа NodeJS и NPM.

Во-вторых, откройте терминал и введите следующую команду:


npm i gulp -g

i – это сокращение от install(установить), а gglobal(глобально), что значит, что сборщик проектов будет установлен в вашу систему, а не в определенную папку. Это нужно при первой установке, а впоследствии флаг g вам уже будет не нужен.

Заключение

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

А на этом у меня все. Спасибо за внимание!


  • Создано 08.06.2016 20:36:40



  • Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):


  1. Кнопка:

    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru//images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так:


  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

myrusakov.ru