Этот современный gulp шаблон предназначен для ускорения разработки простых сайтов и автоматизации рутинных задач. Дружелюбен к новичкам в веб-разработке. Подойдет, если вы используете следующий стек технологий: JavaScript, HTML, CSS, также поддерживаются препроцессоры Pug и Sass.
Основные функции:
- Перенос файлов из
srcвprodдиректорию и сборка проекта - Работа как с чистыми
.htmlи.css, так и с.pugи.sassфайлами без необходимости вносить какие-то модификации в сборку. - Возможность импорта внутри JS, HTML и CSS файлов
- Компиляция
.pugи.sassфайлов в.htmlи.cssсоответственно - Реализованы sourcemaps для удобства отслеживания изменений при использовании DevTools в браузере
- Автоматизирована работа с картинками и шрифтами
- Использование автопрефиксера и минификатор для css
- Минификация и автоматическое преобразование JS для корректной работы в старых браузерах
- Добавление линейки, которая позволит измерить расстояние между блоками, что крайне полезно при верстке
- Gulp - таск-менеджер для автоматизации рутинных задач в веб-разработке, тут подробнее.
- Node.js - программная платформа, основанная на движке V8, превращающая JavaScript из узкоспециализированного языка в язык общего назначения, подробнее.
- LTS - Long-Term support, стабильная версия ПО, которая будет поддерживаться длительное время.
- npm - Node package manager, позволяет создавать, обмениваться и устанавливать различные пакеты, тут подробнее.
.webp- формат легковесных картинок, разработанный компанией Google специально для веба.- Pug - препроцессор для языка html, предлагает упрощенный синтаксис и более гибкий настройки для разметки страниц, компилируется в HTML, тут подробнее.
- Sass - это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода, тут подробнее
package.json- файл, в котором указываются все зависимости проектаpackage-lock.json- файл, в котором указываются все подзависимости (зависимости зависимостей) проекта. Является неизменяемым и формируется автоматически.node_modules- директория, в которую устанавливаются зависимости проекта, формируется автоматически..gitkeep- git не позволяет хранить пустые директории, поэтому для их отслеживания необходим файл-заглушка, коим и является.gitkeep.- sourcemaps - подключая единый файл скриптов или стилей, при дебаге мы хотим понять, в каком именно модуле допущена ошибка. Sourcemap нам такую возможность предоставляет, указывая к какому модулю относится определенный кусок кода.
- Если у вас не установлен Node.js, то скачайте и установите его отсюда (выбирайте LTS версию). Это позволит вам использовать Node.js пакеты, а также управлять ими с помощью npm (Node package manager).
- Скопируйте (или склонируйте) все файлы из данного репозитория к себе в проект.
- Удалите файлы
.gitkeep. - В поле
nameвpackage.jsonвведите название своего проекта. - В командной строке вашего редактора введите команду
npm install, она установит нужные зависимости. - Приступайте к работе!
your-project
|
|- .gitignore
|- gulpfile.js
|- package.json
|- package-lock.json
|- node_modules (создается автоматически после выполнения npm install)
|- src
| |- index.html
| |- fonts
| |- images
| |- html
| |-spacingjs.html
| |-spacingjs.pug
| |- ваши элементы страницы
| |- scripts
| | |- script.js
| | |- supportWebp.js
| | |- ваши скрипты
| |- styles
| |- styles.css
| |- ваши стили
|- prod (создается автоматически при запуске gulp)
| |- index.html
| |- fonts
| |- images
| |- scripts
| | |- script.js
| |- styles
| |- styles.css
Вероятно, в описании к большинству npm пакетов вы встретите следующий вариант подключения:
const gulp = require('gulp');
Однако я использую более современный синтаксис EcmaScript Modules, который поддерживается Node.js начиная с версии 13.2.0:
import gulp from 'gulp';
Почему? Потому что многие авторы популярных npm пакетов принудительно переводят их самые свежие версии на ESM синтаксис, и если импортировать их через require(), то они просто не заработают (к примеру, gulp-imagemin начиная с версии 8.0.0 можно затащить в проект только с помощью ESM).
По-умолчанию Node.js не видит ESM, поэтому нам надо явно объявить, что наш проект использует именно синтаксис ESM. Для этого достаточно добавить поле type со значением module в наш package.json
- Режим разработчика
gulp- запускает сервер с live edit, собирает и перебрасывает файлы в папкуprod, компилирует pug и sass, spacing.js работает, sourcemaps работают. - Режим сборки
gulp build- запускает сервер без live edit, собирает и перебрасывает файлы в папкуprod, компилирует pug и sass, прогоняет JS через babel, sourcemaps отключены, сжимает картинки, преобразует шрифты во все актуальные форматы, минифицирует JS, CSS, HTML, отключает spacing.js.
File include позволяет включать одни HTML или JS файлы внутрь других, это помогает разбить код на модули для его переиспользования.
Как это использовать?
- Допустим, у нас есть header, который используется на нескольких страницах сайта. Мы можем написать разметку хедера в
src/html/header.html, а затем импортировать его в нашindex.htmlследующим образом:@@include('html/header.html') - Аналогично мы собираем наши скрипты в один файл
scripts/script.jsи уже его подключаем к нашей странице.
На самом деле, file-include предоставляет более гибкие возможности, например внутри импорта можно передавать некоторые параметры, которые будут вставлены в включаемый файл. Подробнее об этом можно почитать здесь.
В дальнейшем во всех тасках будет использоваться gulp-plumber, который решает проблему обработки ошибок внутри .pipe, подробнее можно прочитать в этой короткой статье.
Gulp из коробки поддерживает работу с сорсмапами, устанавливать какие-то дополнительные плагины не нужно. Подробнее об этом можно почитать здесь. В моем шаблоне сорсмапы работают только в режиме разработчика, при сборке проекта командой gulp build они отключаются.
- gulp-remove-html - удаляет HTML, нужен для удаления скрипта spacing.js при сборке в режиме build.
- gulp-pug - компилирует наши
.pugфайлы в.html - gulp-htmlmin - минифицирует HTML
- gulp-webp-html - оборачивает тэг
<img>в тэг<picture>, чтобы подключить современный формат изображений.webp
К нашей странице мы всегда подключаем единый файл стилей styles/styles.css, в этот файл мы импортируем все остальные стили (normalize.css, default.css, fonts.css и т.д.). Аналогично подключаем единый файл скриптов scripts/script.js.
Spacing.js - удобная утилита, которая добавит на ваш сайт линейку для измерения расстояний между различными блоками на странице, что бывает крайне полезно при верстке. Чтобы активировать этот инструмент, достаточно зажать alt и навести курсор на нужный элемент страницы.
Чтобы подключить этот инструмент к нашему сайту, просто импортируем наш spacingjs.html в самый конец нашей HTML страницы (сразу после подключения скриптов) с помощью file-include следующим образом @@include('html/spacingjs.html'). Если вы работаете с Pug, то нужно импортировать html/spacingjs.pug.
- gulp-sass - компилирует наши
.sassфайлы в.css - gulp-webpcss - отвечает за автоматическое подключение картинок webp формата внутри css (работает совместно с
supportWebp.js, об этом позже). - gulp-postcss - отвечает за постобработку нашего CSS.
- gulp-group-css-media-queries - группирует все наши media запросы и вставляет их в конец файла стилей.
- postcss-import - позволяет импортировать одни CSS файлы внутрь других.
- autoprefixer - отвечает за автоматическую расстановку вендорных префиксов браузеров.
- postcss-media-minmax - позволяет заменить
max-width: 500pxнаwidth <= 500pxпри формировании media запросов. - postcss-csso - минифицирует наш CSS.
Импорт CSS в общий файл стилей осуществляем с помощью следующего синтаксиса: @import 'normalize';. Обратите внимание, нам не нужно указывать расширение импортируемого CSS файла, также важно чтобы все импорты были в самом начале нашего файла стилей.
- gulp-babel - преобразует современный ES6+ таким образом, чтобы он работал со старыми версиями браузеров.
- gulp-terser - современный аналог uglify, минифицирует JS код.
- gulp-imagemin - сжимает и оптимизирует картинки.
- gulp-webp - преобразует наши картинки в webp формат.
Не все браузеры поддерживают формат изображений .webp, поэтому чтобы проверить может ли браузер, в котором крутится наш сайт, в .webp мы используем специальный сниппет scripts/supportWebp.js. Если вкртаце, то он с помощью JS создает webp картинку и проверяет может ли прогрузить ее браузер. Если может, то этот скрипт добавляет <body> класс webp, если нет, то no-webp. Это нужно для корректной работы webp картинок, которые мы используем в нашем CSS по url'у, например через background.
Обратите внимание, что при вставке нашей картинки через background все свойства фона должны задаваться именно в нем.
При работе с тэгом <img> не забывайте указывать атрибут alt, который будет отображаться если картинка по каким-то причинам не прогрузилась или если сайт читается скринридером. Рекомендую в конце вашего alt ставить точку, это позволит скринридерам сделать паузу после прочтения картинки. Об этой фишке узнал из доклада Никиты Дубко про img.
- gulp-fonter - конвертирует шрифты, в параметрах указываются желаемые форматы.
- gulp-ttf2woff2 - конвертирует ttf в woff2.
Как работать со шрифтами и как их правильно подгружать на страницу можно почитать в этом гайде от Google.