Gulp: кому нужен и как начать работу

Что это такое? Gulp – это программа для организации и обработки задач, которую используют для разработки различного ПО. Она может использоваться как программистами, так и другими айти-специалистами, например, верстальщиками.

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

Что собой представляет Gulp

Gulp предназначен для автоматизации рутинных операций в процессе веб-разработки. А конкретнее, инструмент решает следующие задачи:

• Запуск веб-сервера, автоматическая перезагрузка страницы сайта с сохранением новой редакции кода и возможностью отслеживать сделанные изменения.
• Выполнение команд операционной системы и контроль за их выполнением.
• Внедрение в код JavaScript, CSS и HTML соответствующих препроцессоров (CoffeeScript, Less, Sass, Stylus, Jade и др.).
• Упрощение кода CSS и JavaScript, а также оптимизация файловой структуры и слияние нескольких файлов проекта в один.
• Автоматическое добавление вендорных префиксов к названиям свойств CSS, используемых разработчиками браузеров для определенных целей.
• Удобное управление файлами и папками проекта.
• Редактирование изображений в популярных форматах (PNG, JPG, SVG и др.).
• Загрузка файлов проекта на сервер посредством протоколов FTP, SFTP, Git и некоторых других.
• Подключение к проекту всевозможных утилит и модулей Node.js в неограниченном количестве.

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

При установке программы в корневом каталоге создается конфигурационный файл gulpfile.js. В нем содержатся необходимые инструкции по управлению текущим проектом. Несмотря на то, что данный файл имеет синтаксис JS, Gulp в своем использовании не предполагает наличие у разработчика навыков программирования на этом языке. Инструкции gulpfile.js однотипны, с их написанием справится даже новичок.

Установка Gulp

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

Весь процесс начинается с ввода команды:

npm i gulp-cli -g

Здесь:

• npm — программа-установщик;
• i — команда установки пакета;
• gulp-cli — имя устанавливаемого пакета;
• g — опция, указывающая на глобальную установку в системе.

Прежде всего необходимо создать определенные папки, которые будут использовать в работе с проектом. Они должны иметь имена исключительно на латинице.

Начнем с создания корневой папки. Дадим ей имя, например, myproject. Затем нужно войти внутрь созданного каталога посредством командной строки. Можно открыть данную папку, кликнув по ней правой клавишей мыши и выбрав пункт «Открыть в PowerShell» (или аналогичный пункт в зависимости от версии ОС).

Внутри корневого каталога создается файл package.json путем ввода команды:

npm init

Узнай, какие ИТ - профессии
входят в ТОП-30 с доходом
от 210 000 ₽/мес

Павел Симонов

Исполнительный директор Geekbrains

Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.

Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

Скачивайте и используйте уже сегодня:

Павел Симонов

Исполнительный директор Geekbrains

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

Поможет разобраться в актуальной ситуации на рынке труда

Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка

Только проверенные нейросети с доступом из России и свободным использованием

ТОП-100 площадок для поиска работы от GeekBrains

Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽

Получить подборку бесплатно

pdf 3,7mb

doc 1,7mb

Уже скачали 31954

Если для работы достаточно настроек по умолчанию, нужно еще добавить дополнительную опцию в конце:

npm init -y

В созданном файле будет находиться информация о текущем проекте (имя проекта, описание, автор, список зависимостей и т. д.).

Все эти данные предлагается вводить автору. После каждого ввода нажимается клавиша Enter. В большинстве случаев достаточно указать название, описание и имя автора, а остальные параметры оставить по умолчанию. После ответа на все вопросы файл package.json должен появиться в папке.

Далее приступаем к установке Gulp непосредственно в каталог проекта myproject.

Выполняется команда:

npm i gulp —save-dev

Она может иметь сокращенный вид:

npm i gulp -D

Основное отличие от глобальной установки заключается в отсутствии флага -g. И тогда программа устанавливается локально в то место, откуда была открыта командная строка. При этом появилась опция -D (или —save-dev), означающая, что пакет и его версия гарантированно добавятся в файл package.json. Эта полезная функция позволит в дальнейшем быстро устанавливать пакеты из других проектов путем простого копирования данного файла.

Итак, программа установлена в нашу папку myproject. Внутри создался подкаталог с именем node_modules, содержащий сам Gulp вместе со всеми зависимостями.

Пример работы в Gulp

В качестве примера разберем проект разработки сайта. Организация структуры здесь основана на компонентном подходе. А именно, каждый компонент будет соответствовать одной странице сайта и занимать отдельную папку для размещения файлов стилей, разметки страницы и скриптов. Дополнительные подкаталоги предназначаются для используемых изображений и шрифтов. Все файлы компонентов содержатся в общей папке src, а для сохранения результата отведена папка public.

Общая файловая структура проекта выглядит так:

/project

./public

../css

../images

../js

../index.html

../order.html

./src

../components

…/header

…./header.html

…./header.scss

…/offer

…./offer.html

…./offer.js

…./offer.scss

…/order

…./order.html

…./order.js

…./order.scss

…/footer

…./footer.html

…./footer.js

…./footer.scss

../fonts

../images

../js

…/script.js

../pages

…/index.html

…/order.html

../styles

…/style.scss

./gulpfile.js

./package.json

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

В итоге создается файл манифеста package.json, предназначенный для сохранения сведений об используемых модулях. Последние устанавливаются командой npm install.

Потребуются следующие модули:

• del (очищает папку public);
• sass, gulp-sass (взаимодействуют с препроцессором SASS);
• gulp-autoprefixer (дописывает определенные вендорные префиксы CSS);
• gulp-group-css-media-queries (выполняет группировку всех запросов CSS и размещает их в блоке файла стилей);
• gulp-include (подключает компоненты к итоговым файлам разметки и скриптов);
• browser-sync (выполняет создание и запуск локального веб-сервера).

Читайте также!

Ошибка 502: причины возникновения и способы решить проблему

Подробнее

Перечисленные модули и требуемые проектом свойства нужно сперва объявить в файле gulpfile.js:

• const { src, dest, parallel, series, watch } = require(‘gulp’)
• const del = require(‘del’)
• const sass = require(‘gulp-sass’)(require(‘sass’))
• const autoprefixer = require(‘gulp-autoprefixer’)
• const gcssmq = require(‘gulp-group-css-media-queries’)
• const includeFiles = require(‘gulp-include’)
• const browserSync = require(‘browser-sync’).create()

Чтобы модуль browser-sync мог создать и запустить сервер, необходимо подготовить для этого модуля задачу, используя свойства соответствующего API. Подготовка выполняется в несколько шагов:

• инициализация веб-сервера;
• указание рабочей папки;
• отключение необходимости вводить расширение .html в URL страницы;
• назначение порта для взаимодействия с сервером;
• назначение порта для пользовательского интерфейса веб-сервера;
• загрузка главной страницы сайта в браузере.

Код будет выглядеть так:

function browsersync() {

browserSync.init({

server: {

baseDir: ‘./public/’,

serveStaticOptions: {

extensions: [‘html’],

},

},

port: 8080,

ui: { port: 8081 },

open: true,

})

}

Далее формируем CSS-стили путем выполнения следующих операций:

• обращение к исходному файлу style.scss;
• перевод синтаксиса SASS в формат CSS;
• отображение в терминале ошибок, допущенных в исходном файле;
• добавление вендорных префиксов CSS с использованием модуля Autoprefixer (необходимо в частности для совместимости Grid Layout с Internet Explorer);
• группировка медиавыражений и их размещение в конце файла;
• сохранение итогового файла в папке /public/css/;
• применение созданных стилей к открытой в браузере странице с использованием модуля browser-sync.

Дарим скидку от 60%
на курсы от GeekBrains до 24 ноября

Уже через 9 месяцев сможете устроиться на работу с доходом от 150 000 рублей

Забронировать скидку

function styles() {

return src(‘./src/styles/style.scss’)

.pipe(sass().on(‘error’, sass.logError))

.pipe(autoprefixer({ grid: true }))

.pipe(gcssmq())

.pipe(dest(‘./public/css/’))

.pipe(browserSync.stream())

}

Для создания скриптов необходимо сформировать задачу с указанием такого алгоритма действий:

• обращение к исходному файлу script.js;
• обработка JS-файлов компонентов;
• применение внесенных изменения к открытой в браузере страницы.

Код будет выглядеть следующим образом:

function scripts() {

return src(‘./src/js/script.js’)

.pipe(

includeFiles({

includePaths: ‘./src/components/**/’,

})

)

.pipe(dest(‘./public/js/’))

.pipe(browserSync.stream())

}

Только до 25.11

Скачай подборку материалов, чтобы гарантированно найти работу в IT за 14 дней

Список документов:

ТОП-100 площадок для поиска работы от GeekBrains

20 профессий 2023 года, с доходом от 150 000 рублей

Чек-лист «Как успешно пройти собеседование»

Чтобы получить файл, укажите e-mail:

Введите e-mail, чтобы получить доступ к документам

Подтвердите, что вы не робот,
указав номер телефона:

Введите телефон, чтобы получить доступ к документам

Скачать подборку бесплатно pdf 2,5mb

Уже скачали 52300

Я подтверждаю согласие на обработку персональных данных.

Модуль gulp-include может использовать параметр includePaths для подключения файлов компонентов к скрипту script.js. При этом полный путь к этим файлам указывать не требуется:

//=include offer.js

//=include order.js

Данный параметр действует и в процессе обработки страниц. Благодаря этому подобным образом используются и компоненты в HTML-файлах:

<!—=include header.html —>

<!—=include offer.html —>

<!—=include order.html —>

<!—=include footer.html —>

Обработка страниц выполняется задачей pages:

• считывание исходного файла страницы;
• обработка файлов компонентов;
• перезагрузка открытой страницы после сохранения сделанных изменений.

Код будет выглядеть так:

function pages() {

return src(‘./src/pages/*.html’)

.pipe(

includeFiles({

includePaths: ‘./src/components/**/’,

})

)

.pipe(dest(‘./public/’))

.pipe(browserSync.reload({ stream: true, }))

}

Чтобы подключать изображения и шрифты, нужно создать задачи для асинхронного копирования файлов из src в public:

function copyFonts() {

return src(‘./src/fonts/**/*’)

.pipe(dest(‘./public/fonts/’))

}

function copyImages() {

return src(‘./src/images/**/*’)

.pipe(dest(‘./public/images/’))

}

async function copyResources() {

copyFonts()

copyImages()

}

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

async function clean() {

return del.sync(‘./public/’, { force: true })

}

Наконец нужно обеспечить отслеживание изменений в файлах. Соответствующая задача состоит из следующих действий:

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

Вид исходного кода:

function watch_dev() {

watch([‘./src/js/script.js’, ‘./src/components/**/*.js’], scripts)

watch([‘./src/styles/style.scss’, ‘./src/components/**/*.scss’], styles).on(

‘change’,

browserSync.reload

)

watch([‘./src/pages/*.html’, ‘./src/components/**/*.html’], pages).on(

‘change’,

browserSync.reload

)

}

В конец файла gulpfile.js нужно добавить команды экспорта объявленных функций в общедоступные задачи, а затем сгенерировать сводные задачи, запускающие проект в режиме разработки и собирающие его итоговый вариант:

• browsersync = browsersync
• clean = clean
• scripts = scripts
• styles = styles
• pages = pages
• copyResources = copyResources

exports.default = parallel(

clean,

styles,

scripts,

copyResources,

pages,

browsersync,

watch_dev

)

exports.build = series(

clean,

styles,

scripts,

copyResources,

pages

)

Популярные статьи

Высокооплачиваемые профессии сегодня и в ближайшем будущем

Дополнительный заработок в Интернете: варианты для новичков и специалистов

Востребованные удаленные профессии: зарабатывайте, не выходя из дома

Разработчик игр: чем занимается, сколько зарабатывает и где учится

Как выбрать профессию по душе: детальное руководство + ценные советы

Плагины Gulp

Работа с CSS и препроцессорами

gulp-sass (экспорт из формата SCSS в формат CSS);

gulp-less (экспорт из формата LESS в формат CSS);

gulp-autoprefixer (добавление префиксов для нестандартных CSS свойств);

gulp-cssnano (общая минификация кода).

Приведем пример задачи.

gulp.task(‘scss’, function(){

return gulp.src(‘src/scss/*.scss’)

.pipe(sass().on(‘error’, gutil.log))

.pipe(autoprefixer({

browsers: [‘since 2011’],

cascade: false

}))

.pipe(gulp.dest(‘www/files/css’))

.pipe(cssnano())

.pipe(rename({suffix: ‘.min’}))

.pipe(gulp.dest(‘www/files/css’));

});

Работа с JavaScript

gulp-uglify.

Читайте также!

Kotlin: универсальный язык программирования

Подробнее

Примерный код:

gulp.task(‘js’, function(){

return gulp.src(‘src/js/*.js’)

.pipe(uglify())

.pipe(rename({suffix: ‘.min’}))

.pipe(gulp.dest(‘www/files/js/’));

});

Сжатие изображений

imagemin-pngquant (обработка формата PNG).

Примерный код:

.pipe( imagemin([ pngquant({quality: 70}) ],{verbose:true}) )

imagemin-jpegoptim, imagemin-mozjpeg (обработка формата JPG).

Примерный код:

.pipe( imagemin([ mozjpeg({quality: 80}) ],{verbose:true}) )

Подключение исходного кода другого файла

gulp-rigger (обработка форматов js, css, scss).

Данный плагин собирает несколько файлов в один с учетом порядка подключения

gulp-cache (кэширование результатов обработки файлов).

Примерный код:

gulp.task(‘jpeg’, function(){

return gulp.src(‘src/img/**/*.jpg’)

.pipe(

cache(

imagemin([ mozjpeg({quality: 85}) ],{verbose:true})

)

)

.pipe(gulp.dest(‘www/files/img’));

});

Обработка ошибок

В случае обнаружения ошибок при обработке файла задача прерывает свое выполнения.

Если запуск задачи выполнялся через watch после изменения файла, обнаруженная в этом файле ошибка приведет к прерыванию дальнейшего наблюдения за остальными файлами. Во избежание подобных ситуаций ошибки нужно своевременно отлавливать, используя плагин gulp-util, предварительно подключенный в gulpfile.js:

var gutil = require(‘gulp-util’).

Отслеживание ошибок также возможно путем добавления к каждому изучаемому плагину конструкции:

.on(‘error’, gutil.log)

В результате пользователь увидит сообщение об ошибке, а обработка файлов при этом прерываться не будет.

Примерный код:

gulp.task(‘js’, function(){

gulp.src(‘src/js/*.js’)

.pipe(rigger().on(‘error’, gutil.log))

.pipe(gulp.dest(‘www/files/js/’));

});

Итак, благодаря грамотному использованию инструмента Gulp, проект любого сайта или приложения разрабатывается и собирается в кратчайшие сроки. Множество рутинных задач, описанных выше, поддается автоматизации. Рабочий процесс в целом существенно ускоряется, минимизируется риск возникновения ошибок, связанных с ручной обработкой файлов.

Автор статьи:

Редакция сайта GeekBrains Шеф-редактор раздела Программирование