Создадим чистый стартовый шаблон, с него будем начинать новые проекты и проверять новые библиотеки.
В конце статьи можно скачать шаблон.
Разберем из каких файлов он состоит и основные функции этих файлов.
Содержание статьи
Рассмотрим файл index.html
- Откроем index.html. Есть в шаблоне основной seo тег title, description. Подробно можно у знать о этих тегах.
- Дальше метатеги для указания, что у нас адаптивный сайт.
- Отдельный блок для картинок. Задаем og:image отвечает за картинку, которая вставляется при постинге в социальные сети.
- Следом загружаются четыре фавиконки разных размеров, для разных устройств.
- Также можно добавить акцентный цвет, которым будет отображаться заголовок на различных девайсах.
- Внизу загружаются скрипты и стили каждый одним файлом.
С выходов стандарта html 5.2 стили подключать можно в конце.
Появился нюанс у такого способа. Сайт распадается до загрузки стилей.
Т.е. при обновление страницы все хаотично, потом собирается в кучу и правильно отображается.
Для этого есть тег style, который ставит body в opacity 0 ничего не видно до загрузки сайта.
overflow-x: hidden для того чтобы не появлялась горизонтальная загрузка до загрузки main.sass, где в body есть overflow-x: hidden.
Это позволяет делать прелоадер. Пока идет загрузка сайта отображается прелоадер.
Цвет бекграунда нужно ставить такой, каким цветом будет основной шаблон.
В файле gulpfile.js уже прописаны все основные таски, как добавлять их можно посмотреть в основные плагины gulp.
Все таски gulpfile.js
- Это дефолтный таск watch, следит за всеми изменениями в файлах
- Таск build, который собирает проект
- Imagemin, который при сборке проекта сжимает все картинки
- Таск компиляции js
- Компиляция sass
- Запускается browser-synk
Весь js код мы пишем в common.js.
Все переменные пишутся в файле vars.sass.
Все медия запросы пишутся в media.sass.
Все css стили библиотек мы размещаем в файде libs.sass. Копируем верхнюю строку и на подобие нее прописываем пути к нужной библиотеке, которую подключаем.
Все шрифты прописываем в fonts.sass.
В main.sass пишем все стили к проекту.
Выгружаем проект
Если хотим выгрузить готовый проект, то вводим команду gulp build. Появится папка dist. В ней собранный полностью проект.
Скачать шаблон
Скачиваем архив, распаковываем, устанавливаем все модули командой npm i.
Дожидаемся установки всех компонентов. Появится папка node_modules.
Запускам проект командой gulp. Пишем текст в body и проверяем, что все автоматически отразилось в браузере.