Gulp - знакомство и первый запуск

Reading time ~6 minutes

В этой статье будем знакомиться с новым менеджером задач (task manager) под названием Gulp. Постепенно вместе с вами я пройду весь процесс - от установки Gulp до установки плагинов, создания задач, отслеживания ошибок и еще многое другое.

Но для начала узнаем, что такое Gulp. Это точно такой менеджер задач, как и Grunt. Оба они являются модулями под Node.js и устанавливаются с помощью пакетного менеждера

1
npm
.

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

Gulp

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

Установка Gulp

Установка будет производиться под операционной системой Linux Mint 17 Cinnamon. Поэтому, пользователи Mac OS найдут все нижеприведенные команды абсолютно идентичными для себя. Подразумевается, что в системе уже установлен Node.js и менеджер пакетов npm.

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

1
-g
. Давайте так и поступим - произведем установку в системе:

$ sudo npm install -g gulp

Затем создадим тестовую директорию с именем

1
gulp_test
, в которой будет производить наше знакомство:

$ mkdir gulp_test
$ cd gulp_test/

В этой директории создадим файл

1
package.json
и пропишем в нем имя проекта и его версию:

$ touch package.json
$ cat package.json
{
  "name": "first",
  "version": "0.0.1",
  "devDependencies": {}
}

Этого будет достаточно. Теперь установим Gulp внутри директории

1
gulp_test
. При этом воспользуемся ключом
1
--save-dev
, который будет “говорить” менеджеру пакетов npm вносить в файл
1
package.json
все устанавливаемые им пакеты в качестве зависимостей проекта:

$ npm install --save-dev gulp

Теперь снова посмотрим на содержимое файла

1
package.json
и увидим, что npm добавил Gulp в качестве зависмости:

$ cat package.json
{
  "name": "first",
  "version": "0.0.1",
  "devDependencies": {
    "gulp": "~3.8.7"
  }
}

Установка завершена и можно переходить к использованию этого менеждера задач.

Первый запуск Gulp

Менеджер задач - само слово говорит за себя, это программа для управления задачами. В Gulp все задачи прописываются в одном единственном файле

1
gulpfile.js
. Первоначально этого файла не существует и его нужно создать самостоятельно, вручную:

$ touch gulpfile.js

Затем в нем пропишем первую задачу. Все задачи деляться на два неравнозначных типа: задача по умолчанию (default task) и именованные задачи (named tasks). Разница между ними в том, что задача по умолчанию имеет имя

1
default
, которое можно и не указывать. Кроме того, задача по умолчанию запускается в консоли всего одной командой:

$ gulp

В то время как именованная задача (named task) может иметь произвольное имя. Запуск такой задачи в консоли выполняется с указанием имени конкретной задачи:

$ gulp name_of_task

Еще один важный момент заключается в том, что этот менеджер задач является потоковым. Что это значит? Не знаю, получиться ли у меня достаточно точно объяснить данный вопрос, но вот линуксоиды, хорошо знакомые с командной строкой, меня должны понять. В консоли Linux (Unix) есть такое понятие, как pipe.

Например, простая команда:

$ ls -l | less

… выполняет следующее: результат команды

1
ls -l
перенаправляется для обработки в программу
1
less
. Редактор
1
less
автоматически открывается в консоли с уже готовым для чтения текстом внутри себя.

Чисто схематично такой пример можно усложнить и представить в таком виде:

$ programm1 | programm2 | programm3 | programm4 | programm5

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

Принцип работы Gulp точно такой же. Только вместо программ в нем используются плагины (я не забыл сказать, что он имеет модульную структуру?):

$ plugin1 | plugin2 | plugin3 | plugin4 | plugin5 | plugin6

Отлично! С теорией закончили и можно снова возвращаться к практике, к нашему файлу настроек

1
gulpfile.js
. Откроем его и пропишем в нем такие строки:

var gulp = require('gulp');

gulp.task('default', function(){
  console.log('Hello from Gulp!')
});

Первая строка

1
var gulp = require('gulp');
создает переменную
1
gulp
, в которую помещается сам Gulp. Это необходимо для Node.js, который будет читать файл
1
gulpfile.js
и работать с Gulp в виде переменной
1
gulp
.

Вторая строка, начинающаяся с

1
gulp.task
- это не что иное, как задача. Именно так создаются задачи в этом менеджере. Здесь
1
'default'
- это имя задачи (в данном случае это задача по умолчанию, как вы помните). Функция
1
function()
имеет в своем теле неограниченное количество инструкций. Так как мы еще не умеем работать с плагинами под Gulp, то в качестве инструкции пропишем вывод в консоль обычной текстовой строки -
1
console.log('Hello from Gulp!')
.

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

1
gulp
:

$ gulp
[19:37:53] Using gulpfile ~/Projects/gulp_test/gulpfile.js
[19:37:53] Starting 'default'...
Hello from Gulp!
[19:37:53] Finished 'default' after 169 μs

Вот это да! А что означают все эти строки в консоли? Означают они только хорошее! Строка

1
Using gulpfile ~/Projects/gulp_test/gulpfile.js
говорит о том, что Gulp для своей работы воспользовался файлом настроек
1
gulpfile
по указанному пути. Затем было запущено выполнение задачи с именем
1
default
-
1
Starting 'default'...
. Результатом выполнения этой задачи был вывод в консоль строки -
1
Hello from Gulp!
. И задача с именем
1
default
благополучно завершилась -
1
Finished 'default' after 169 μs
, причем на ее выполнение ушло 169 миллисекунд.

Можно поздравить самих себя - мы только что создали и запустили на выполнение свою первую задачу под Gulp!


MongoDB - создание документа

![MongoDB]({{site.url}}/images/uploads/2017/05/mongodb-logo.jpg "MongoDB")Приступили к самому основному - операциям создания, чтения, изм...… Continue reading

MongoDB - документы

Published on May 23, 2017