Август 2017
Автор: Рубрика: Верстка Комментариев нет

Чистый gulp шаблон

Чистый gulp шаблон

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

В конце статьи можно скачать шаблон.

Разберем из каких файлов
он состоит и основные функции этих файлов.

Рассмотрим файл index.html

  1. Откроем index.html. Есть в шаблоне основной seo тег title, description. Подробно можно у знать о этих тегах.
  2. Дальше метатеги для указания, что у нас адаптивный сайт.
  3. Отдельный блок для картинок. Задаем og:image отвечает за картинку, которая вставляется при постинге в социальные сети.
  4. Следом загружаются четыре фавиконки разных размеров, для разных устройств.
  5. Также можно добавить акцентный цвет, которым будет отображаться заголовок на различных девайсах.
  6. Внизу загружаются скрипты и стили каждый одним файлом.

С выходов стандарта html 5.2 стили подключать можно в конце.

В шаблоне рассмотрим index.html

Появился нюанс у такого способа. Сайт распадается до загрузки стилей.

Т.е. при обновление страницы все хаотично, потом собирается в кучу и правильно отображается.

Для этого есть тег style, который ставит body в opacity 0 ничего не видно до загрузки сайта.

overflow-x: hidden для того чтобы не появлялась горизонтальная загрузка до загрузки main.sass, где в body есть overflow-x: hidden.

overflow-x: hidden в main.sass

Это позволяет делать прелоадер. Пока идет загрузка сайта отображается прелоадер.

Цвет бекграунда нужно ставить такой, каким цветом будет основной шаблон.

В файле 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 и проверяем, что все автоматически отразилось в браузере.

Комментариев нет

Комментарии:

Комментарии запрещены