Gulp 4 HTML5 шаблон для верстки

Автор: dimkazambidis

---

Удобный и простой в настройке шаблон Gulp для быстрой и качественной верстки сайта

---

Используется Gulp v4
Сетка основана на Bootstrap v4 (настраивается: app/sass/_vars.sass см. "Настройки сетки")
Используется jQuery v3.1.1
Используемый препроцессор SASS

Исспользуемые пакеты:

• browser-sync
• gulp-sass
• gulp-concat
• gulp-uglify
• gulp-babel
• gulp-clean-css
• gulp-rename
• del
• gulp-imagemin
• gulp-webp
• gulp-webp-html
• gulp-cache
• gulp-autoprefixer
• gulp-file-include

Структура:

Корень проекта

Здесь находятся все необходимые файлы для управления сборкой

• gulpfile.js - команды и задачи Gulp
• package.json - список и настройки пакетов npm
• .bowerrc - настройки менеджера библиотек Bower (подключение библиотек, нпример jQuery)
• node_modules - какталог с необходимыми пакетами npm
• src - каталог с исходным кодом (именно здесь и производится основная работа)
• dist - каталог для выгрузки готовой верстки (создается при запуске gulp и при выполнении команды build)

src

Здесь распологаются все файлы, из которых и будет собираться проект

• src/fonts - шрифты
• src/images - изображения
• src/images/favicon - favicon по умолчанию и для различных устройств
• src/js - скрипты javascript
• src/js/part - подключаемые части кода javascript
• src/libs - подключаемые библиотеки (именно сюда Bower скачивает библиотеки см. .bowerrc)
• src/parts - подключаемые части разметки html
• src/sass - файлы стилей препроцессора sass
• src/sass/_mixins - миксины sass

Использование:

Внимание! У вас должен быть установлен Node.js, а затем глобально gulp ( в командной строке - "gulp -g"). Для установки через Bower, он тоже должен быть установлен ( в командной строке - "npm install -g bower")

1. Скачать и распаковать шаблон

2. Установить требуемые пакеты Node (в папке в командной строке - "npm i")

3. Запустить (в папке в командной строке - "gulp")

Команды и задачи:

Расположение: gulpfile.js

Команды

gulp - запускает команду по умолчанию 'default' для разработки (cleanFunc, htmlFunc, sassFunc, jsFunc, imgFunc, fontsFunc, browserSyncFunc, watchFunc). Сборка происходит в папку dist.

gulp build - запускает команду 'build' для сборки в папку dist со сбросом кэша (clearcacheFunc, cleanFunc, htmlFunc, sassFunc, jsFunc, imgFunc, fontsFunc). Не запускает сам Gulp. Нужен для быстрой пересборки в каталог dist.

gulp clearcache - запускает команду 'clearcache' для отчистки кэша ('clearcacheFunc'). В данный момент кэшируется только минификация изображений.

Задачи

browserSyncFunc - автоперезагрузка браузера

jsFunc - обрабатывает и собирает файлы javascript по пути src/js. (обрабатывает babel пользовательские скрипты, объеденяет со скриптами библиотек, создает полный и минифицированный файлы скриптов scripts.js и scripts.min.js) (включает в себя задачи: jsUseFunc, jsLibFunc)

sassFunc - обрабатывает и собирает файлы sass по пути src/sass (проставляет префиксы, создает полный и минифицированный файлы стилей style.css и style.min.css)

htmlFunc - обрабатывает и собирает файлы html

imgFunc - обрабатывает файлы изображений (оптимизирует изобрежения)

imgFonts - обрабатывает файлы шрифтов

watchFunc - отслеживает изменения

cleanFunc - удаляет директорию dist

clearcacheFunc - сбрасывает кэш пакета 'gulp-cache'

Переменные:

Расположение: src/sass/_vars.sass

Шрифты

$font-default - Шрифт по умолчанию (определяется в src/sass/_fonts.sass)

Цвет

$color-base - Основной цвет
$color-accent - Акцентный цвет
$color-placeholder - Цвет placeholders
$color-success - Цвет успешно выполненного действия
$color-danger - Цвет невыполненного действия (ошибка)
$color-text - Цвет текста
$color-link - Цвет ссылок

Параметры текста

$fz-base - базовый размер шрифта (px)
$lh-base - базовая высота строки

Функции

+fz($fz) - выведет font-size: $fz/$fz-base + rem, где $fz - размер шрифта в px (переведет размер шрифта из px в rem)
+lh($fz, $lh) - выведет line-height: $lh/$fz, где $fz - размер шрифта в px, $lh - высота строки в px

Настройки сетки

$grid-gutter-width - расстояние между колонками
$grid-columns - количество колонок
$grid-breakpoints - контрольные точки. Могут быть расширены своими значениями, например: xxl, xxxl и т.д (удобно в "резиновых" макетах)
$container-max-widths - ширина контейнера

Миксины

Расположение: src/sass/_mixins

Шрифты

Расположение: src/sass/_mixins/_font-face.sass +font-face(Family, Path, Weight, Style) - Подключение шрифтов, где Family - семейство, Path - путь до файла (без расширения), Weight - толщина начертания, Style - стиль шрифта.

Медиазапросы

Расположение: src/sass/_mixins/_media_queries.sass

+mq-mf(Breakpoint) - Mobile First (min-width), где Breakpoint - контрольная точка (минимальная ширина в пиксилях), доступны bootstrap значния (xl, lg, md, sm). Кастомные значения, тоже сюда входят (см. раздел Переменные, Настройки сетки, $grid-breakpoints). Например:

+mq-mf(xl)
	background-color: red

+mq-df(Breakpoint) - Desktop First (max-width), где Breakpoint - контрольная точка (максимальная ширина в пиксилях), доступны bootstrap значния (xl, lg, md, sm). Кастомные значения, тоже сюда входят (см. раздел Переменные, Настройки сетки, $grid-breakpoints). Например:

+mq-df(xl)
	background-color: red

+mqh-mf(BreakpointWidth, BreakpointHeight) - Mobile First (min-width, min-height), где BreakpointWidth - контрольная точка по ширине (минимальная ширина в пиксилях), доступны bootstrap значния (xl, lg, md, sm), BreakpointHeight - контрольная точка по высоте Например:

+mqh-mf(xl, 500px)
	background-color: red

+mqh-df(BreakpointWidth, BreakpointHeight) - Desktop First (max-width, max-height), где BreakpointWidth - контрольная точка по ширине (максимальная ширина в пиксилях), доступны bootstrap значния (xl, lg, md, sm), BreakpointHeight - контрольная точка по высоте Например:

+mqh-df(xl, 500px)
	background-color: red

Media запросы

Расположение: src/sass/_media.sass

Анимации

Расположение: src/sass/_animate.sass

Подключение шрифтов

Расположение: src/sass/_fonts.sass

Стили библиотек

Расположение: app/sass/_libs.sass

Стили header

Расположение: src/sass/_header.sass

Стили footer

Расположение: src/sass/_footer.sass

Стили контента (при желании можно разбить на составляющие)

Расположение: src/sass/_layout.sass

Базовые стили

Расположение: src/sass/_base.sass

Основной файл стилей (сборка в один файл)

Расположение: src/sass/style.sass

Html

Расположение: src

Подключаемые части html (header, footer, или например карточка товара)

Расположение: src/parts
Подключение: в нужном месте @include('parts/название_файла.html')

Javascript

Расположение: src/js/common.js

Подключаемые части js

Расположение: src/js/parts
Подключение: в нужном месте @include('parts/название_файла.js')

Библиотеки и плагины

Расположение: src/libs

Установка:

1. Поместить папку с библиотекой в src/libs, или через bower (например, в коммандной строке "bower i slick-carousel")

2. Скрипты подключить в gulpfile.js (Задача jsLibFunc, в src добавив путь до нужного файла)

function jsLibFunc() {
	return gulp.src([
		srcFolder + '/libs/jquery/dist/jquery.min.js',
		srcFolder + '/libs/imagesloaded/imagesloaded.pkgd.min.js',
		distFolder + '/js/scripts.js'
	])
	.pipe(concat('scripts.js'))
	.pipe(gulp.dest(path.dist.js))
	.pipe(rename({
		suffix: '.min'
	}))
	.pipe(uglify())
	.pipe(gulp.dest(path.dist.js))
	.pipe(browserSync.stream());
}

Внимание! Перезапустите Gulp

3. Стили подключить в src/sass/_libs.sass