Стартовый шаблон

 

 

GitHub - OptimizedHTML2.0

 

Максимальной оптимизации сайта для поисковиков - без всего лишнего, и картинки максимально под ноль.

 

 

Также в проект добавлена возможность быстрого деплоя файлов на сервер   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

 

 

И будет создана папка продакшен проекта:

 

 

Получим полностью собранный проект:

  1. Ничего лишнего
  2. Все стили минифицированы
  3. Fonts все собраны
  4. Картинки у нас оптимизированы + favicon
  5. html - не изменился! Он уже оптимизирован.

    Fonts    -   Шрифты

 

 

 

Причем, - без указания фотрматов (   eot     woff        ttf  ) - как в Стартовом шаблоне 1.0