Дистрибутив проектов

Репозиторий, служащий шаблоном для начала работы над фронтэнд-проектами.

Технологически: LESS и простейшая шаблонизация.

Компиляция с помощью Grunt

Для запуска сборки нужно поставить необходимые пакеты. Из папки проекта запустить:

npm install

Задачи Grunt

grunt          # запуск всех задач, слежения за файлами, локального сервера, автообновления
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.

Шрифты

Предполагается следующий матод работы со шрифтами:

1. Используем шрифты в формате woff, ибо caniuse.com/woff.
2. Отдаем шрифты со своего сайта в виде CSS-файла с base64 данными. Файл получаем с помощью fontsquirrel.com. Конфиг генератора — файл 'fontsquirrel_config.txt'.
3. Если у пользователя нет шрифта, загружаем его асинхронно и сохраняем в localStorage, иначе загружаем его из localStorage без обращения к серверу (см. src\js\script.js, блок подгрузки шрифта закомментирован).

Источник: css-live.ru.

Для традиционного подключения шрифта со своего хоста нужно раскомментировать в задачах Gruntfile.js копирование файлов шрифта.