/ 

Разбираемся со сборкой front end на Gulp

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

Что такое Gulp?

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

Установка Gulp

Установить Gulp достаточно легко. Если у вас что-то не получится, пишите в комментариях или загуглите вашу проблему. Итак для установки нужно сделать 3 шага:

  • Установить Gulp глобально
  • Установить Gulp как devDependencies (зависимости для разработки)
  • Создать файл gulpfile.js

Первый шаг — устанавливаем глобально Gulp. Открываем терминал и пишем:

npm install --global gulp

После этого вам нужно установить Gulp как devDependencies для вашего проекта. Убедитесь в том, что у вас есть файл package.json. Если его нет, то создайте его написав в консоль npm init. Теперь можно установить Gulp как devDependencies:

npm install --save-dev gulp

И наконец, вам нужно создать gulpfile.js в корне вашего проекта, который будет содержать ваши задачи (tasks). В качестве промежуточного шага, мы установим плагин gulp-util. Чтобы показать как устанавливаются плагины:

npm install --save-dev gulp-util

Теперь настало время написать нашу первую задачку. Открываем только что созданный файл gulpfile.js и пишем в него следующее:

/* File: gulpfile.js */

// собираем все наши плагины
var gulp  = require('gulp'),
    gutil = require('gulp-util');

// создаем задачку, которая будет выполняться по умолчанию
gulp.task('default', function() {
  return gutil.log('Gulp is running!')
});

И теперь нам остается запустить gulp в терминале и мы увидим нечто похожее на это:

> gulp
[12:32:08] Using gulpfile ~/Projects/gulp-scotch-io/gulpfile.js
[12:32:08] Starting 'default'...
[12:32:08] Gulp is running!
[12:32:08] Finished 'default' after 1 ms

Обзор

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

Api у gulp очень маленькое, и содержит всего 4 функции высшего порядка:

  • gulp.task
  • gulp.src
  • gulp.dest
  • gulp.watch

gulp.task определяет наши задачи. В качестве аргументов принимает название, зависимости (массив) и функцию (основные действия). Зависимостей может и не быть:

gulp.task('mytask', function() {
  //сделать что-то
});

gulp.task('dependenttask', ['mytask'], function() {
  //сделать что-то после того, как 'mytask' будет выполнен
});

gulp.src указывает на файлы, которые мы хотим использовать. Он использует .pipe доступа к файлам через плагины.

gulp.dest указывает на папку, в которую мы хотим сохранить измененные файлы.

gulp.src и gulp.dest используется для простой копии файлов:

gulp.task('copyHtml', function() {
  // скопировать все html файлы из source/ в public/
  gulp.src('source/*.html').pipe(gulp.dest('public'));
});

В gulp встроена система реагирования на изменения файлов (gulp.watch). Вы можете использовать эту задачу для запуска других необходимых вам задач при изменении файлов.

gulp.watch('source/**/*.html', ['copyHtml']);

Этот пример будет выполнять задачу copyHtml когда любой html файл в папке source изменится.

В следующей статье мы разберемся подробнее о задачах, синхронность и асинхронностью и напишем что-нибудь полезное.

⌘ ⌘ ⌘
Поделиться
Отправить
Используем системный шрифт San Franciso на Mac OS
Фронтенд

Используем системный шрифт San Franciso на Mac OS

Сниппет для использования нового системного шрифта San Franciso из El Capitan и IOS 9.

Полезная привычка #1: Проверяй код перед комитом
Фронтенд

Полезная привычка #1: Проверяй код перед комитом

Первая статья из серии полезных привычек разработчиков и программистов: Проверяй свой код перед комитом.

Гайд по стилю кода на JavaScript от AirBnB
Фронтенд

Гайд по стилю кода на JavaScript от AirBnB

Общие рекомендации по стилю написания кода от Airbnb. Влючая сравнения производительности и лучшие практики.