Основы использования Gulp для сборки JavaScript-приложений
Инструменты

Основы использования Gulp для сборки JavaScript-приложений

Gulp — это инструмент сборки веб-приложения, позволяющий автоматизировать повторяющиеся задачи, такие как сборка и минификация CSS- и JS-файлов, запуск тестов, перезагрузка браузера и т.д. Тем самым Gulp ускоряет и оптимизирует процесс веб-разработки. В статье мы рассмотрим основы использования этого инструмента.

Что такое Gulp

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

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


npm install -g gulp

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


npm install --save-dev gulp

Работа с 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:


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

Дальше мы определяем таск ‘minify’, а действия, которые будем выполнять в этой задаче, описываем в переданной во втором параметре функции.


gulp.task('minify', function() {
    ...
});

И наконец, мы описываем действия, которые должен совершать наш таск.


gulp.src('js/app.js')
    .pipe(uglify())
    .pipe(gulp.dest('build'));

В простом случае функции gulp.task передается только два параметра: название таска и функция. Таск также может включать в себя выполнение других тасков. К примеру, мы можем определить таск build, который будет запускать выполнение двух других тасков: css и js:


gulp.task('build', ['css', 'js']);

Таски css и js будут выполняться асинхронно, поэтому нельзя гарантировать, что один из тасков выполнить раньше другого. Если требуется проверить, что таск завершился, перед запуском следующего, можно определить зависимость следующим образом:


gulp.task('css', ['js'], function() {
    ...
});

Теперь Gulp будет запускать таск js и ждать его завершения перед запуском таска css.

Также Gulp позволяет определить таск по умолчанию, который будет запускаться по команде gulp:


gulp.task('default', function() {
    ...
});

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

  • js/app.js — файл app.js в директории js
  • js/*.js — все файлы с расширением .js в директории js
  • js/**/*.js — все файлы с расширением .js в директории js и всех дочерних директориях
  • !js/app.js — исключает определенный файл
  • *.+(js|css) — все файлы в корневой директории с расширениями .js или .css

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


gulp.src(['js/**/*.js', '!js/**/*.min.js'])

Потоки

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

В приведенном выше примере, функция gulp.src() принимает строку, которая соответствует некоему файлу или группе файлов, и создает поток объектов, представляющих эти файлы. Дальше эти объекты передаются функции uglify(), которая возвращает новые объекты минифицированных файлов. И наконец, функция gulp.dest() сохраняет измененные файлы.

Рассмотрим теперь следующий код:


gulp.task('js', function() {
    return gulp.src('js/*.js')
       .pipe(jshint())
       .pipe(jshint.reporter('default'))
       .pipe(uglify())
       .pipe(concat('app.js'))
       .pipe(gulp.dest('build'));
});

В этом таске, кроме gulp и gulp-uglify используются плагины gulp-concat и gulp-jshint, для его запуска необходимо установить эти плагины. Этот таск берет файлы по маске ‘js/*.js’ (файлы с расширением .js в директории js) и запускает JSHint. Дальше выводит результат, потом минимизирует файлы, объединяет их в один файл app.js и и только потом сохраняет его в директории build.

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

Заключение

В статье мы немного познакомились со сборщиком JavaScript-проектов Gulp. Это по-настоящему быстрый инструмент, построенный на Node.js, очень сильно упрощающий жизнь веб-разработчика. Для него существует огромное количество плагинов для различных задач, а файл сборки имеет краткий, удобочитаемый и простой синтаксис. Также в файле сборки можно использовать любой модуль Node.js и передавать параметры в задачи gulp.

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

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться