Как узнать версию gulp
Gulp — это таск-менеджер для автоматического выполнения часто используемых задач (например, минификации, тестирования, объединения файлов), написанный на языке программирования JavaScript.
Программное обеспечение использует командную строку для запуска задач, определённых в файле Gulpfile.
Создан как ответвление от проекта Grunt, чтоб взять из него лучшие практики. Распространяется через менеджер пакетов NPM под MIT лицензией.
Это основная статья об использовании Gulp. В данный момент Вы можете помимо этой прочитать также статьи:
Установка
Рассмотрим установку с помощью npm. Подразумевается, что nodejs Вы уже установили.
О том как установить npm читайте в моей статье Установка npm
Проверить версию gulp
CLI version: 2.2.0 Local version: Unknown
Про установку не последней, а какой-то определённой версии Gulp читайте здесь
Теперь нужно перейти в директорию, в которой Вы планируете работать. Я буду делать сайт www.HeiHei.ru поэтому перехожу в директорию
Затем переходим непосредственно к установке gulp в текущий проект
Посмотрим, как изменился наш файл package.json
Подробнее о том, зачем этот файл нужне читайте в статье npm
Появился раздел devDependencies, в который в будущем я добавлю ещё довольно много пакетов.
Если теперь посмотреть содержимое папки node_modules можно увидеть, что установка Gulp добавила не одну папку, как, например, сделал бы jquery а несколько десятков.
Старые версии npm создавали всегда одну папку и размещали все зависимости туда.
Новые версии npm сохраняют зависимости в родительскую папку node_modules.
Установка более старой версии
Иногда бывает нужно установить не текущую, а более ранню версию Gulp.
Сделать это можно добавив нужную версию после @
npm uninstall gulp
Gulpfile.js
Первым делом запишем туда
const gulp = require(‘gulp’);
Начиная с верси 4.0 можно пользоваться новым синтаксисом JavaScript (ES2015+)
import gulp from ‘gulp’
Но для этого нужно устанавливать babel и следить чтобы не было ошибок. Я видел на форумах жалобы, сам пока не пробовал.
После того как файл gulpfile.js создан можно запустить Gulp
Результатом будет похожее сообщение
[11:22:35] Using gulpfile
Нужно его определить
default запустится но теперь Gulp пожалуется на непонятное закрытие.
[11:31:44] Using gulpfile
\Desktop\Sites\heihei\gulpfile.js [11:31:44] Starting ‘default’. Gulp is running! [11:31:44] The following tasks did not complete: default [11:31:44] Did you forget to signal async completion?
Эту ошибку можно устранить несколькими способами. Подробности здесь. Я пользуюсь следующим:
Организация файлов
Чтобы не создавать каши из файлов и папок организуем всё правильно с самого начала.
Корневая папка носит называние проекта. В моё случае heihei или heiheiru
В этой папке мы инициализируем GIT и npm.
Для GIT мы сами рано или поздно создадим файл gitignore
Так как мы будем пользоваться Gulp появится и файл gulpfile.js
С ростом числа заданий, которые будет выполнять Gulp нам станет неудобно хранить их все в одном файле.
Чтобы хранить эти файлы нам будет нужна папка, назовём её gulp и создадим в корневой. Внутри неё создадим подпапку tasks
Всё, что относится непосредственно к сайту положим в папку heiheiru/app
Так будет выглядить дерево папок в редакоторе Sublime
Примеры использования Gulp
Обработка файлов стилей
При разработке удобно пользоваться метаязыками, например, SASS.
Установим его с помощью npm
Теперь можно объявить переменную sass и пользоваться этим препроцессором
gulp-watch
gulp-watch это название плагина для Gulp, который отслеживает изменение файлов. Начиная с четвёртой версии Gulp gulp-watch включен в основной пакет и не требует отдельной установки.
Как это выглядит в Gulp 4
Чтобы запустить мониторинг пишем
[20:12:19] Using gulpfile
\Desktop\Sites\heihei\gulpfile.js
[20:12:19] Starting ‘watch’.
Теперь вносим изменения в файл index.html и сохраняем
[20:14:28] Starting ‘html’.
Кто-то отредактировал index.html!
Как это выглядело в Gulp 3
Мы уже писали такую функцию выше, просто немного изменим её.
Добавим мониторинг файлов CSS gulp.watch( «./app/assets/styles/**/*.css», style);
Теперь как только мы отредактируем один из файлов стилей watch заметит это изменение, пропустит его через sass, соберет все файлы в один.
чтобы делать вложения в стилях (nested css)
чтобы использовать mixins
PostCSS
До этого Вы уже прочитали про препроцессор SASS, который наряду с LESS и Stylus является стандартом для многих проектов.
Я не пользуюсь ими, а предпочитаю более современный PostCSS, который имеет более модульную структуру, и соответственно более гибкий в настройке и быстрый
Какой бы пре или пост процессор Вы не выбрали, нужно освоить работу с ним, научиться выполнять простые задачи и переходить к более сложным задачам, таким как Обработка только изменённых файлов с помощью gulp.watch().on(‘change’)
Подробнее про PostCSS Вы можете прочитать в статье PostCSS.
Советую разобраться с PostCSS и возвращаться в эту статью либо в одну из следующих, более продвинутых глав.
Я не стал размещать описание работы с PostCSS здесь, потому что его можно запускать не только с помощью Gulp
Видеоуроки Gulp
Ошибки
SKIPPING OPTIONAL DEPENDENCY: fsevents
Ошибка при установке gulp. Вы выполняете
npm WARN saveError ENOENT: no such file or directory, open ‘C:\Users\ao\Desktop\Sites\heihei\package.json’
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open ‘C:\Users\ao\Desktop\Sites\heihei\package.json’
npm WARN heihei No description
npm WARN heihei No repository field.
npm WARN heihei No README data
npm WARN heihei No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted <"os":"darwin","arch":"any">(current: <"os":"win32","arch":"x64">)
+ gulp@4.0.2
added 314 packages from 217 contributors and audited 6490 packages in 30.037s
found 0 vulnerabilities
Скорее всего Вы не инициализировали npm. Нужно выполнить
Ввести нужные данные (либо просто нажимать Enter), после чего создастся файл package.json и можно будет вернуться к установке gulp
Unhandled ‘error’ event
Может быть вызвана, например, несуществующей переменной. Допустим Вы добавили цвет как переменную, но нигде её не задали.
Unexpected identifier
Если Вы запустили Gulp
И получили что-то похожее
SyntaxError: Unexpected identifier
at Module._compile (internal/modules/cjs/loader.js:723:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at execute (C:\Users\ao\AppData\Roaming\npm\
node_modules\gulp-cli\lib\versioned\^4.0.0\index.js:36:18)
at Liftoff.handleArguments (C:\Users\ao\AppData\Roaming\npm\
node_modules\gulp-cli\index.js:201:24)
at Liftoff.execute (C:\Users\ao\AppData\Roaming\npm\
node_modules\gulp-cli\node_modules\liftoff\index.js:201:12)
Скорее всего Вы пытаетесь использовать синтаксис ES2015+ и не установили babel или он работает но с ошибкой.
Did you forget to signal async completion?
Причина в том, что начиная с Gulp 4 нужно указывать окончание выполнения асинхронного кода. Третий Gulp при отстутствии такого сигнала просто решил бы, что код синхронный. В четвёртом так не получится.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted <"os":"darwin","arch":"any">(current: <"os":"win32","arch":"x64">)
Это предупреждение о несовместимости пакета fsevents с Windows, как Вы можете убедиться здесь fsevents нужен для работы с iOS поэтому можно просто проигнорировать.
Эту ошибку я разбираю в статье Gulp series
Всем привет, друзья! Сегодня мы подробно рассмотрим, что такое Gulp и как с его помощью можно автоматизировать работу Front-end разработчика. В результате урока мы соберем серьезное и внушительное рабочее Front-end окружение для веб-разработки с использованием Gulp.
Основные ресурсы урока:
С примером урока вы можете ознакомиться на GitHub: agragregra/gulp-lesson
Установка Gulp
Внимание! Если вы пользователь последней версии Windows, рекомендую использовать WSL для веб-разработки. Скачивать инсталлятор с сайта Nodejs.org в этом случае не нужно. Воспользуйтесь этим руководством: Использование подсистемы Linux для веб-разработки в Windows.
Если у вас возникли проблемы при прохождении урока с использованием Gulp 4, рекомендую откатиться на 3 версию, пройти полностью урок и только после этого обновить package.json до 4 версии. Для лучшего понимания. Откатить версию можно в файле package.json. Вместо «gulp»: «^4.x.x», напишите версию «^3.9.1», удалите папку «node_modules» и установите пакеты заново «npm i«.
После того, как Node установлен, можно приступать к установке Gulp. Откройте терминал (правая кнопка мыши в папке с зажатым Shift > Откройте здесь оболочку Linux) и выполните следующую команду:
Создание проекта Gulp
Давайте создадим папку проекта для примера, с которой будем работать, пусть это будет, например, папка myproject.
Очень важно! Не создавайте русскоязычные папки проектов и следите за тем, чтобы путь до папки проекта не содержал кириллических символов, то-есть не был написан на русском языке. В противном случае, у вас могут возникнуть проблемы при работе различных утилит Gulp. Папка вашего пользователя также не должна быть русскоязычной. Все только латинскими буквами.
Теперь откроем терминал в папке проекта. Для пользователей Windows достаточно зажать Shift и открыть контекстное меню. В нем появится пункт «Откройте здесь оболочку Linux». Оболочка Linux должна быть предварительно установлена, см урок: Использование подсистемы Linux для веб-разработки в Windows.
Далее выполним инициализацию проекта в той папке, которую создали:
Следуя инструкциям, заполним метаинформацию о нашем проекте:
Назовем проект «MyProject»
Имя автора можно и указать 🙂
license оставляем по умолчанию и вводим yes:
В результате такой несложной первоначальной настройки нашего нового Gulp проекта в папке myproject нарисуется новый файл package.json.
Файл package.json является файлом манифеста нашего проекта, который описывает помимо той информации, что мы внесли в терминале, еще и информацию об используемых пакетах в нашем проекте.
Например, если мы установим в проект Gulp с ключом —save-dev, то пакет и используемая версия автоматически добавится в наш package.json. Такой учет позволит быстро разворачивать новый проект с использованием уже имеющегося package.json и устанавливать необходимые модули с зависимостями, которые прописаны в package.json в новых проектах.
Давайте установим в наш проект Gulp:
Кроме того, у нас появляется папка node_modules, которая теперь содержит установленный пакет gulp и необходимые зависимости. В данную папку автоматически будут сваливаться все модули и зависимости, которые мы будем устанавливать в проект. Папок с зависимостями может быть очень много, не смотря на то, что мы установили не так уж и много пакетов. Это связано с тем, что в дополнение к основным пакетам устанавливаются программы, необходимые для корректной работы основного пакета. Ни чего чистить и удалять из папки node_modules не нужно. Кроме того, у вас может появиться дополнительный файл package-lock.json. В этом нет ничего страшного, это служебный файл, на который можно просто не обращать внимания.
Структура каталогов в проектах
Работая с различными плагинами, программами и скриптами, будь то jQuery плагин, модуль для CMS, веб-проект или какое-то другое ПО, вы наверняка замечали, что у всех проектов есть схожая структура каталогов, например, большинство проектов имеет папку dist и app. Давайте создадим первоначальную структуру нашего учебного проекта. В результате мы должны создать следующую структуру в нашем проекте myproject (все файлы, которых не было, пока создаем пустыми):
- myproject/
- app/
- css/fonts/img/js/sass/index.html
dist/node_modules/gulpfile.jspackage.json
Данная структура встречается довольно часто, практически во всех проектах, но это не аксиома и некоторые проекты могут иметь вообще другую структуру. Для данной статьи мы будем использовать именно такую структуру проекта.
Папка dist/ будет содержать уже готовый продукт, оптимизированный, сжатый, причесанный. Это папка продакшена.
gulpfile.js
Теперь давайте откроем в редакторе кода gulpfile.js и напишем в него:
Данной строчкой мы подключаем Gulp к нашему проекту, посредством функции require. Данная функция подключает пакеты из папки node_modules в наш проект, присваивая их переменной. В данном случае, мы создаем переменную gulp.
Далее мы уже можем работать с этой переменной и создавать таски (инструкции).
gulpfile.js:
Результат выполнения команды gulp mytask:
Если вы используете Gulp 4 и у вас появляется ошибка о невозможности завершения таска, можно добавить async перед function() и выполнять код асинхронно:
Это, конечно очень простой базовый пример создания таска. Как правило, таски несколько сложнее и включают некоторые дополнительные команды:
Это база Gulp, теперь можно создавать инструкции. Для начала давайте создадим обработчик, который будет компилировать Sass файлы в CSS (CSS препроцессинг).
Gulp Sass
Давайте установим пакет gulp-sass в наш проект с сохранением версии и названия в package.json.
Обратите внимание, что любые Gulp пакеты, для любых задач, легко гуглятся и имеют вполне исчерпывающие инструкции по подключению на своих хоумпейджах и в документации.
Далее подключим gulp-sass в файле gulpfile.js. Обратите внимание, что переменные для подключения пакетов можно перечислять через запятую:
gulpfile.js:
После этого, логичным будет выполнить в терминале наш новый таск sass:
В результате выполения данной команды в папке app/css появится файл main.css.
От таки чудеса, друзя. Как видим, все просто 🙂
Выборка файлов для gulp.src
В принципе, мы рассмотрели все, что необходимо знать о Gulp, теперь будем углубляться в каждую деталь того, что было изложено выше.
Давайте познакомимся ближе со всеми возможностями выборки файлов для обработки.
Самые распространенные шаблоны выборки
Давайте внесем некоторые изменения в таск sass и сделаем его более универсальным:
Дело в том, что брать напрямую один отдельный файл не всегда удобно, так как в папке sass могут появиться и другие файлы с расширением sass, которые могут использоваться в проекте.
Обратите внимание, что файлы sass, которые предназначены для импорта в другие файлы, как части одного общего, начинаются с нижнего подчеркивания _part-1.sass. Такие файлы не учавствуют в компиляции, как отдельные файлы, а добавляются через @import в основные файлы.
Наблюдение за изменениями в файлах (Gulp Watch)
Gulp поддерживает метод watch для проверки сохраняемых файлов и имеет следующий синтаксис:
Если мы, например, хотим наблюдать за всеми изменениями в файлах sass нашего проекта, то можем использовать следующую конструкцию:
Что мы видим: Gulp наблюдает за всеми sass файлами и при сохранении выполняет таск sass, который автоматически компилирует их в css файлы.
Также, мы можем создать отдельный таск для наблюдения за всеми необходимыми файлами
Для Gulp 4 код будет выглядеть так:
Если мы запустим в консоли gulp watch, то Gulp будет автоматически следить за всеми измененями в файлах sass при сохранении и компилировать их в css.
Было бы неплохо в дополнение к этой красоте сделать автоматическую перезагрузку страницы при изменениях в файлах. Для этой задачи нам подойдет Browsersync.
Автоматическое обновление страниц с использованием Bbrowser Sync
Мы уже умеем устанавливать дополнения для Gulp, поэтому давайте установим Browser Sync в наш проект:
И, конечно-же, подключим в файле gulpfile.js, как мы это делали ранее с пакетом gulp-sass.
Создаем таск для Browser Sync:
Отлично! Наш сервер для работы и автоматического релоада готов. Теперь давайте последим за изменениями в Sass. Если файл Sass обновляется, автоматически инжектим в HTML измененный CSS файл:
Обратите внимание, что мы выполняем таски [‘sass’, ‘browser-sync’] до запуска watch, так как их выполнение необходимо нам для корректного отображения изменений на момент запуска сервера.
Для Gulp 4 логичнее было бы написать так и выполнять всю конструкцию в дефолтном таске:
Расположим таск watch после всех других тасков и в результате получим такой gulpfile.js для Gulp 3:
Такой код получится для Gulp 4:
Для того, чтобы следить за изменениями в браузере, сделаем соответствующую разметку в файле index.html директории app с подключением файла стилей main.css:
Выполним в терминале команду «gulp». Результат завораживает:
Давайте разберемся, что у нас происходит в консоли (картина может разниться, в зависимости от версии ПО):
И эта задача нам по плечу. Создайте в папке app/js файл common.js. Это основной пользовательский JS файл в нашем проекте. Модифицируем код:
Код для Gulp 4 (здесь лучше добавить дополнительный таск для обработки HTML и JS):
Здесь мы используем функцию browserSync.reload, которую нам любезно предоставил пакет Browser Sync. Обратите внимание на выборку файлов для слежения.
В принципе, мы уже имеем довольно продвинутое рабочее окружение. Но двигаемся дальше, это не все, на что способен Gulp.
Оптимизация JavaScript
Давайте рассмотрим, как можно оптимизировать JS файлы проекта. Чаще всего, в оптимизации нуждаются библиотеки и сторонние jQuery и JavaScript плагины. Давайте создадим в папке app паку libs, которая будет содержать необходимые проекту библиотеки. Все библиотеки будем размещать в отдельных папках.
Для установки новых библиотек рекомендую использовать Bower.
Обратите внимание, что для работы Bower необходим установленный https://git-scm.com/downloads. Если в ОС Windows вы используте оболочку Ubuntu bash, то установку Git выполнять не нужно.
Теперь в папке проекта создадим файл .bowerrc, в который напишем:
Если вы пользователь ОС Windows, у вас не получится просто взять и создать файл, начинающийся с точки. В этом случае можно просто поставить точку в конце файла и нажать Enter: .bowerrc.
Данной настройкой мы указываем путь по умолчанию для установки плагинов с помощью Bower.
Установим jQuery и Magnific Popup, для примера:
Обратите внимание, что все (ну, или почти все) плагины имеют папку dist, об этом мы говорили ранее. В этой папке располагаются готовые файлы продакшена, которые мы и будем использовать в нашем проекте.
Давайте создадим таск scripts, который будет собирать все JS файлы библиотек в один и минифицировать файл. Для этого установим 2 пакета: gulp-concat и gulp-uglifyjs.
Подключим новые библиотеки в gulpfile.js:
Создаем задачу для сборки и сжатия всех библиотек (перед watch):
Давайте проверим, как работает наш новый таск scripts, выполнив в терминале:
Выполнение таска scripts можно запустить перед выполнением watch. Gulp 3:
На выходе, в папке app/css мы получаем дополнительно к main.css файл libs.css, который содержит стили всех библиотек. Файл main.css нет особого смысла минифицировать, так как он содержит кастомные (пользовательские) стили. А вот файл libs.css мы с удовольствием минифицируем.
Внимание! Если в файле libs.css не появляется кода библиотек, а вы по-прежнему видите в нем конструкции @import, создайте отдельный файл _libs.sass для библиотек, который начинался бы с нижнего подчеркивания. Затем импортируйте этот файл в главный, тем самым объеденив и библиотеки и пользовательские стили в один файл.
Для минификации CSS установим пакеты gulp-cssnano и gulp-rename:
И подключим их в нашем gulpfile.js:
И создадим соответствующий таск css-libs. Сразу добавим данный таск в watch для того, чтобы библиотеки собирались в процессе запуска проекта. Таск sass лучше вызвать до запуска css-libs, чтобы нам было что минифицировать:
Подготовка к продакшену
Результирующий код для Gulp 4 будет представлен в конце статьи.
Для продакшена (сборки в папку dist) мы создадим отдельный таск build в конце gulpfile.js. В данной инструкции мы осуществим сборку Sass, JS и выгрузку того, что у нас готово в папку dist.
Здесь, присваивая переменным какие-либо действия, мы их выполняем. Таким образом можно выполнять мультизадачные таски. Можно и не присваивать, но мы сделаем так, ибо красивше.
Все прекрасно, но всегда есть одно «Но». Перед тем, как собирать проект нам желательно бы очистить папку dist, чтобы не оставалось лишних потрохов от предыдущих итераций с нашим проектом.
Установим и подключим пакет del:
Создаем таск очистки clean и добавляем его выполнение перед выполнение build:
Для Gulp 4 попробуйте составить таски самостоятельно, как мы это делали в предыдущих прмерах.
Оптимизация изображений
Как вы могли заметить, в нашем проекте на продакшене не хватает изображений. Давайте исправим это недоразумение и добавим обработку изображений в наш проект. Данный раздел выполнен с использованием Gulp 3. Код для Gulp 4 можно адаптировать самостоятельно, как мы это делали ранее.
В папке app/img есть 3 изображения, которые нам необходимо перенести в папку продакшена, оптимизируя.
Для оптимизации изображений установим 2 пакета (gulp-imagemin, imagemin-pngquant) и подключим их:
Далее создадим таск img для сжатия изображений на продакшен и вызовем его после очистки:
Все прекрасно. До тех пор, пока количество изображений в проекте не превышает 3 шт. Большое количество картинок будет обрабатываться значительно дольше, поэтому к обработке изображений было бы неплохо добавить кеш, чтобы картинки кешировались, экономя наше время.
Установи м подключим gulp-cache:
Модифицируем таск img:
Автоматическое создание префиксов CSS с помощью Gulp
Вендорные префиксы необходимы для обеспечения максимальной совместимости со всеми современными браузерами. Было бы логично сделать автоматическое добавление префиксов, чтобы написав в CSS или Sass:
Мы получили на выходе:
Установим пакет gulp-autoprefixer и подключим его в gulpfile.js:
И модифицируем наш таск sass:
Дефолтный таск Gulp
Внимание! Дефолтный таск для Gulp 4 отличается от приведенного в этой главе. Полный код для Gulp 4 можно будет посмотреть в конце статьи.
Также, необходимо создать автономный таск для очистки кеша Gulp, чтобы его можно было вызывать простой командой gulp clear:
Если у вас возникнут проблемы с изображениями или другими кешируемыми файлами, просто почистите кеш.
В результате, у нас должен получиться такой gulpfile.js. Gulp 3:
Результирующий код для Gulp 4:
С примером урока вы можете ознакомиться на GitHub: agragregra/gulp-lesson
Чтобы установить все пакеты и зависимости для скачанного примера, выполните команду npm i в папке проекта.
Премиум уроки от WebDesign Master
Создание сайта от А до Я. Комплексный курс
Создание современного интернет-магазина от А до Я
