Стартовый шаблон
Максимальной оптимизации сайта для поисковиков - без всего лишнего, и картинки максимально под ноль.
Также в проект добавлена возможность быстрого деплоя файлов на сервер Deploy
по FTP: при помощи gulp плагина vinil-ftp
Убраны фунции совместимости с IE<9 (Ниже 9-й версии)
Проблема на MAC:
Кроме того - команда ipm i - не устанавливает папку node_modules
Решение проблемы:
Соответственно вводим команду и получаем успешную установку:
Далее: уже вводим команду из урока: > npm i
И получим УСПЕШНУЮ УСТАНОВКУ + появится папка:
И папка node_modules будет создана:
Выполним тестовый билд: gulp build
И будет создана папка продакшен проекта:
Основные таски стартового проекта:
Таск default - Запускаются при этом: sass, js, watch, browser-sync.
Вообщем это дефолтный таск для разработки.
Таск build - для сборки проекта (продакшена). Он удаляем все лишнее.
В него также входит таск build-html
- который собирает именно index. html - файл.
Он include (инклюдит) - необходимые в index.html . Раньше - приходилось в ручную вставлять из header.min.css стили в html файл, которые отвечают за отображение 1-го экрана сайта.
Таск clearcache - отвечает за очистку КЕШа. Потому будет использовать его в Джидай-верстке.
Таск imagemin - сжимает и оптимизирует картинки.
Качаем -> Устанавливаем -> Запускаем проект командой :
gulp
Запуститься страничка в browser-sync
Далее пробежимся по index.html
Полный вид index.html
Мета-тэги - указывающие, что у нас адаптивный сайт.
Далее, отдельный блок для картинок:
- Вставка картинки для Соц. сетей.
Вставка favicon
Подключили основные скрипты и стили для всего сайта:
Видимо сюда уже входит подключение header.min.css - это нужно для того, что бы когда посетитель зашел на сайт - то САЙТ МОМЕНТАЛЬНО ОТОБРАЗИЛСЯ.
А потом уже все остальные стили - через LoadCSS подгружаются.
Для 1.0 - версии были строки загрузки Шрифтов:
Причем 2 случая предусмотрены:
1 - й Не основной (ПОД-САЙТ)
Если сайт (например Лэндинг) - размещен в под-паке основного сайта, тогда Шрифты - загружаем функцией
LoadCSS
2 - й Сайт основной (В КОРНЕ ДОМЕНА)
Эта функция позволяет загружать шрифты из LocalStorageCSS
Не вошло в новый Стартовый шаблон но все же рассмотрим:
Это <noscript>
Нужно для того, что бы: Если у нас отключены JS-скрипты (а у нас происходит загрузка CSS-файлов именно скриптами) - то в этом случае - у нас остается возможность загрузки CSS - напрямую! Используя тэги noscript .
Т.е. посетитель сайта с ОТКЛЮЧЕННЫМИ скриптами - увидит то же самое, что и пользователь с ВКЛЮЧЕННЫМИ скриптами.
Далее БОНУСОМ добавлено: Custom Colors
Якобы - мы можем добавить акцент на какой то цвет - на котором будет отображаться заголовок браузера Девейса.
СТАРЫЙ ШАБЛОН
<-- Custom HTML -->
Бла, бла , бла
<-- Custom HTML -->
ПРИМЕЧАТЕЛЬНО, что скрипты:
jquery.min.js common.min.js
- уже подключаются в таске: js
и объединяются в один файл :
'scripts.min.js'
Т.е. - мы можем подключить и другие библиотеки: Например: magnific-popup
Можно до-инсталировать в этот проект используя bower
И в папке /app/libs - появиться папка:
Поскольку uniMail - у нас исключен из штатного шаблона, то вот как его подключить:
Далее - неожиданно тестируем форму обратной связи:
Сообщение при отправке:
Получили, вполне аккуратное сообщение:
Все переменные, советуют писать в файл _var.sass
Тут пишем - какие то дефлотные переменные которые используются в проекте.
Подключали: 
Файл: media.sass
- тут прописываются медиа-форматы:
Файл: _libs.sass - тут все css стилей jquery-библиотек.
Тут можно также например было бы подключить magnific-popup - раньше, так и было.
Файл: _base.sass - тут указываем все базовые стили:
Которого у нас - теперь нет!
Тэга body , button ,
Опять
В корне app/header.sass
- Это БЫЛО (но уже нет) было сделано для того
Следующий файлик ht.access - Есть в нашем шаблоне!
Отвечает за кэширование: файлов, картинок, шрифтов - то можно "раскоментировать" - этот файл на сервере, - и Google Speed - не будет ругаться на то, что не включено кэширование.
ПРОДАКШЕН в ШАБЛОНЕ
Выполним тестовый билд: gulp build
И будет создана папка продакшен проекта:
Получим полностью собранный проект:
- Ничего лишнего
- Все стили минифицированы
- Fonts все собраны
- Картинки у нас оптимизированы + favicon
- html - не изменился! Он уже оптимизирован.
Fonts - Шрифты
Причем, - без указания фотрматов ( eot woff ttf ) - как в Стартовом шаблоне 1.0
