Репозиторий, служащий шаблоном для начала работы над фронтэнд-проектами.
Технологически: LESS и простейшая шаблонизация.
Для запуска сборки нужно поставить необходимые пакеты. Из папки проекта запустить:
npm installgrunt # запуск всех задач, слежения за файлами, локального сервера, автообновления
grunt style # компиляция стилей
grunt img # пересоздание спрайта и компиляция стилей
grunt build # стирание папки build и запуск всех задач кроме слеженияРазделяем результат и рабочие файлы:
buld/— папка с результатом работыsrc/— папка с рабочими файлами
Для вставки на HTML-страницы подключений стилевого файла, «Шапки», «Подвала», подключений скриптов и любых других повторяющихся блоков можно использовать grunt-include-replace (конструкции, вроде @@include('_html_inc/page_header.html')). А можно и не использовать.
src/less/style.less — диспетчер подключений, в нем только импортируются другие файлы. Компилируется в build/css/style.css, потом оптимизируется в build/css/style.min.css, который и подключается к HTML.
src/less/components — файлы, описывающие стили блоков страницы (отдельные и глобальные).
src/less/mixins — примеси.
При сборке все файлы и папки из src/img будут скопированы в build/img.
Весь проектный JS в src/js/script.js. Плагины и дополнения в src/js/. Нужно прописывать файлы в список конкатенируемых в секции concat файла Gruntfile.js.
Предполагается следующий матод работы со шрифтами:
- Используем шрифты в формате woff, ибо caniuse.com/woff.
- Отдаем шрифты со своего сайта в виде CSS-файла с base64 данными. Файл получаем с помощью fontsquirrel.com. Конфиг генератора — файл 'fontsquirrel_config.txt'.
- Если у пользователя нет шрифта, загружаем его асинхронно и сохраняем в localStorage, иначе загружаем его из localStorage без обращения к серверу (см.
src\js\script.js, блок подгрузки шрифта закомментирован).
Источник: css-live.ru.
Для традиционного подключения шрифта со своего хоста нужно раскомментировать в задачах Gruntfile.js копирование файлов шрифта.