WebSite / GitHub

Gulp - это инструмент сборки веб-приложения, написанный на языке программирования JavaScript, позволяющий автоматизировать повторяющиеся задачи, такие как сборка и минификация CSS- и JS-файлов, запуск тестов, перезагрузка браузера и т.д. Тем самым Gulp ускоряет и оптимизирует процесс веб-разработки. Программное обеспечение использует командную строку для запуска задач, определённых в файле Gulpfile. Создан как ответвление от проекта Grunt, чтобы взять из него лучшие практики. Распространяется через менеджер пакетов npm.

Gulp построен на Node.js, и файл сборки пишется на JavaScript. Сам по себе Gulp умеет не очень много, но имеет огромное количество плагинов, которые можно найти на странице со списком плагинов или просто поиском на npm. Например, есть плагины для запуска JSHint, компиляции CoffeeScript, запуска тестов и даже для обновления номера версии сборки.

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

npm install -g gulp

А потом для приложения:

npm install --save-dev gulp

Cоздадим первый таск для минификации JavaScript файлов (предположим, у нас есть один файл app.js в директории js). Для этого необходимо создать файл gulpfile.js в корне проекта, именно отсюда мы будем запускать таск с помощью команды gulp. Поместим в файл gulpfile.js следующий код:

var gulp = require('gulp'),
    uglify = require('gulp-uglify');

gulp.task('minify', function () {
    gulp.src('js/app.js')
        .pipe(uglify())
        .pipe(gulp.dest('build'));
});

Теперь установим плагин gulp-uglify:

npm install --save-dev gulp-uglify

И запустим команду gulp minify. Можно убедиться, что в директории build создана минифицированная версия app.js.

Теперь давайте разберемся с тем, что мы сделали. Во-первых, в нашем файле gulpfile.js мы загружаем gulp и плагин gulp-uglify. Дальше мы определяем таск ‘minify’, а действия, которые будем выполнять в этой задаче, описываем в переданной во втором параметре функции. И наконец, мы описываем действия, которые должен совершать наш таск. В простом случае функции gulp.task передается только два параметра: название таска и функция. Таск также может включать в себя выполнение других тасков.