Gulp для ускорения разработки
Что такое Gulp, зачем он нужен, его возможности, как установить и как начать использовать в разработке сайтов.
Gulp - что это такое и зачем он нужен
Gulp - это инструмент, позволяющий ускорить процесс web-разработки. Gulp автоматически выполняет все самые необходимые часто используемые задачи.
Возможности Gulp:
- Автоматическая перезагрузка страницы при сохранении кода
- Использование препроцессоров для CSS (например, Sass), для JavaScript (например, CoffeeScript), для HTML (например, Pug)
- Минификация CSS, JavaScript, HTML (уменьшение размера кода путём удаления ненужных символов и пробелов)
- Соединение файлов в один (например, из пяти CSS файлов сделать один файл CSS)
- Создание, удаление и переименование файлов и папок проекта
- Автоматическое создание вендорных префиксов (-webkit, -moz, -o, -ms), чтобы старые версии браузеров поддерживали все css-свойства
- Оптимизация изображений
- И многое другое.
Как установить Gulp глобально в системе
Установка Gulp глобально необходима для того, чтобы была доступна команда gulp в окне команд / bash.
Для установки Gulp нам понадобится пакетный менеджер npm, который входит в состав Node.js. С помощью npm мы будем устанавливать пакеты в каталог node_modules. Если Node.js не установлен, то устанавливаем его. Далее можно начать установку Gulp.
Открыть командную строку и ввести следующий текст:
npm i gulp-cli -g
Коротко о том, что это значит:
- npm - это менеджер пакетов, с помощью которого будем устанавливать Gulp
- i (install) - означает установка
- gulp - это установка Gulp
- -g (global) - установить глобально, а не в какую-то конкретную папку
Таким образом Gulp установлен глобально. Приступим к установке Gulp в папку проекта.
Установка Gulp в папку проекта
Нам также необходимо установить Gulp локально в папке проекта, чтобы мы могли его подключать в gulpfile.js.
При создании папок будущего проекта важно помнить следующее: все папки проекта должны быть написаны латинскими буквами, никаких русских символов не должно быть, это необходимо для корректной работы.
Создадим корневую папку для нашего проекта. Назовём, например, gulp-project. Зайдём в неё, зажмём клавишу shift и выберем в контекстном меню пункт Открыть PowerShell здесь или Открыть окно команд (и т.п.).
Выполним следующую команду для создания файла package.json:
npm init
Или чтобы быстро создать package.json используйте:
npm init -y
Этот файл будет содержать всю информацию о проекте (название, описание, автор и т.д.), а так же об используемых зависимостях в проекте.
Создание файла package.json с командой npm init:
Введём название проекта, описание и автора, а остальные пункты пока оставим по умолчанию, нажимая «Enter». Ответив на все вопросы, будет создан файл package.json.
Теперь мы можем установить Gulp в наш проект, а именно в папку gulp-project, которую мы создавали для нашего проекта.
Для установки Gulp в нашу папку воспользуемся командой:
npm i gulp --save-dev
Или:
npm i gulp -D
Есть несколько отличий от установки Gulp глобально.
Здесь нет -g, т.е. Gulp будет устанавливаться локально в ту папку, в которой была открыта консоль. И появилась запись (флаг) --save-dev (-D), благодаря этому, пакет и его версия будет добавлен в package.json. Это нужно для последующей быстрой установки пакетов в других проектах путём копирования файла package.json.
После установки gulp мы увидим примерно следующее:
Мы установили Gulp в нашу папку gulp-project, в которой появилась новая папка node_modules. В ней и находится Gulp, а так же будут храниться все зависимости нашего проекта.
Так же если зайти в package.json, то увидим изменения:
Создание структуры Gulp проекта
Структура может быть практически любой. У нас будет следующая:
- gulp-project/
- app/
- assets/
- css/
- fonts/
- img/
- js/
- libs/
- sass/
- index.html
- assets/
- dist/
- node_modules/
- gulpfile.js
- package.json
- app/
Пояснение:
- app/ - рабочая папка проекта, в ней будут находиться все исходники - шрифты, изображения, css и js файлы;
- dist/ - папка продакшена, в ней будет находиться готовый оптимизированный проект;
- node_modules/ - папка с модулями и зависимостями;
- gulpfile.js - файл конфигурации, в котором будем описывать все задачи Gulp;
- package.json - файл, содержащий информацию о проекте (название, описание, автор, зависимости и т.д.)
Как создавать задачи (таски) Gulp
Создадим файл gulpfile.js и начнём его заполнение.
Сначала нужно подключить Gulp к проекту, который находится в папке node_modules. Для этого напишем следующий код.
const {src, dest, watch, series, parallel} = require('gulp');
В фигурных скобках мы укажем, все необходимые функции (методы), которые мы будем использовать.
Теперь Gulp подключен к нашему проекту. Далее, мы будем подключать все необходимые пакеты (плагины) для Gulp.
Задача (функция) в Gulp имеет следующий вид.
function taskName() {
// что-то делаем
}
exports.taskName = taskName;
Создадим простейшую задачу (функцию), которая будет выводить строку 'Привет, Gulp!'.
function output(callback) {
console.log('Привет, Gulp!');
callback();
}
exports.output = output;
output - имя функции (задачи), оно может быть любым.
Выполнение задачи
Чтобы запустить задачу, нужно выполнить команду gulp название_задачи. В нашем случае команда будет следующей.
gulp output
Запуск задачи Gulp по умолчанию
Чтобы выполнять задачу output командой gulp, сделаем нашу функцию задачей по умолчанию, присвоив default.
function output(callback) {
console.log('Привет, Gulp!');
callback();
}
exports.default = output;
Пока что у нас только одна задача, которая выводит на экран Привет, Gulp!.
И теперь чтобы запустить нашу задачу, достаточно просто написать gulp.
Это был самый простой пример работы Gulp. Для более сложных задач используются дополнительные методы.
Методы gulp
Мы уже видели в коде выше метод series - который позволяет выполнять перечисляемые задачи последовательно (следующая задача выполняется только после завершения предыдущей). Постепенно мы рассмотрим все методы Gulp.
- src - какие файлы использовать для обработки в потоке;
- dest - куда выгружать обработанные в потоке файлы (место назначения);
- watch - наблюдение за изменениями в файлах;
- series - вызов задач последовательно;
- parallel - вызов задач параллельно.
Как создавать задачи мы рассмотрели. Теперь рассмотрим, как выбирать необходимые файлы.
Gulp src / dest
Сначала рассмотрим пример, затем уже разберём какие паттерны (выборки) для выбора файлов можно использовать.
function yourTask() {
return src('app/assets/css/**.css') // выбираем все css-файлы
// что-то делаем
.pipe(dest('dist/assets/css/')) // и выгружаем
}
exports.yourTask = yourTask;
В данном примере мы видим работу двух методов:
- src (source) - выбираем файлы для обработки;
- dest (destination) - место назначения.
В src мы использовали паттерн css/**.css для выбора всех css файлов внутри папки /assets/css/ (исключая файлы в подпапках, если таковые имеются).
Примеры наиболее используемых паттернов для выбора файлов:
- app/**/*.* - выбор всех файлов в папке app;
- app/js/**/*.js - выбор всех js файлов в папке js;
- app/**/*.{css,js} - все css и js файлы в папке app;
- app/{folder1,folder2}/**/*.{js,css} - все js и css-файлы в папках folder1 и folder2;
- ['app/**/*.css', 'app/**/*.js'] - получаем сначала все css, потом все js в папке app;
- ['app/**/*.*', '!app/**/*.js'] - все файлы в папке app, кроме js-файлов. (! - знак исключения).
Gulp series / parallel
В нашем примере была указана одна функция, но задач в gulp может быть очень много. Чтобы выполнять все перечисленные функции одной командой gulp необходимо сделать следующее.
exports.default = series(output, otherFunc, otherFunc2);
В series мы перечисляем список задач для последовательного выполнения.
Если нам не важно когда закончится та или иная задача, мы можем использовать метод parallel:
exports.default = series(
output,
parallel(otherFunc, otherFunc2),
otherFunc3
);
В данном примере, сначала выполнится задача output, затем последовательно будут выполняться otherFunc и otherFunc2, и после их завершения начнёт своё выполнение задача otherFunc3.
Gulp lastRun()
Используется для ускорения времени выполнения, за счёт пропуска файлов, которые не изменились с момента последнего успешного завершения задачи.
Пример:
const { src, dest, lastRun, watch } = require('gulp');
const imagemin = require('gulp-imagemin');
function images() {
return src('app/assets/images/**/*.jpg', { since: lastRun(images) })
.pipe(imagemin())
.pipe(dest('dist/assets/img/'));
}
exports.default = function() {
watch('app/assets/images/**/*.jpg', images);
};
Установка, подключение и использование плагинов Gulp
Предположим, нам необходим установить плагин del - его используют для удаления файлов и папок.
Это наипростейший пример, но он хорошо демонстрирует последовательность действий.
- 1. Установка.
npm i del -D
- 2. Подключение.
const del = require('del');
- 3. Создание задачи
// Удаление папки «dist» function clean() { return del('./dist/'); } exports.clean = clean;
Просмотр списка задач Gulp
Чтобы просмотреть задачи, которые вы можете выполнить, используйте следующую команду.
gulp --tasks
Обновление плагинов (версий пакетов)
Чтобы проверить наличие новых версий плагинов (пакетов) в package.json, установим npm-check. Данный плагин может не только находить устаревшие зависимости, но так же неправильные и неиспользованные.
Установка.
npm install -g npm-check
Использование - проверка актуальности версий пакетов.
npm-check
Обновление в автоматическом режиме.
npm-check -u
Или же можете самостоятельно обновить/установить/удалить нужный пакет следуя предложенным командам.
Gulp 4
Если у вас не работает Gulp, возможно вы обновили его с 3 версии до Gulp 4. В связи с этим появились ошибки в gulpfile.js из-за изменений в синтаксисе выполнения задач gulp.
Простейший способ реанимировать ваш Gulp проект, это заменить все конструкции с квадратными скобками "[" "]" на gulp.parallel().
Пример:
// у вас было:
gulp.task('watch', ['sass', 'js', 'browser-sync'], function() {
gulp.watch('sass/**/*.sass', ['sass']);
gulp.watch(['libs/**/*.js', 'js/common.js'], ['js']);
gulp.watch('*.html', browsersync.reload)
});
gulp.task('default', ['watch']);
Нужно заменить для Gulp 4.
gulp.task('html', function() {
return gulp.src('*.html')
.pipe(browserSync.reload({ stream: true }))
});
gulp.task('watch', gulp.parallel('sass', 'js', 'browser-sync'), function() {
gulp.watch('sass/**/*.sass', gulp.parallel('sass');
gulp.watch(['libs/**/*.js', 'js/common.js'], gulp.parallel('js'));
gulp.watch('*.html', gulp.parallel('html'))
});
gulp.task('default', gulp.parallel('watch'));
Статьи про Gulp
- Введение в Gulp (1 часть - текущая).
- Использование SASS в Gulp (2 часть).
- Автоматическое обновление страницы с помощью browser-sync для Gulp (3 часть).
- Использование Babel в Gulp (4 часть).
- Моментальная загрузка сайта на хостинг и синхронизация файлов - gulp-rsync (5 часть).
English | Russian |
---|---|
Gulp | Глоток |
Dependencies | Зависимости |
Task | Задача |
Variable | Переменная |
Watch | Наблюдать |
Destination | Пункт назначения |
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:
Комментарии
- Комментариев пока нет.