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

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

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

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

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

npm install

Задачи Grunt

grunt          // запуск всех задач и слежения за файлами
grunt style    // компиляция стилей
grunt img      // пересоздание спрайта и компиляция стилей
grunt build    // стирание папки build и запуск всех задач кроме слежения

Общая парадигма

Разделяем результат и рабочие файлы:

• buld/ — папка с результатом работы
• src/ — папка с рабочими файлами (шаблоны, препроцессор, картинки для спрайта ect.)

Парадигма работы с разметкой

Для вставки на HTML-страницы подключений стилевого файла, «Шапки», «Подвала», подключений скриптов и любых других повторяющихся блоков можно использовать grunt-include-replace (см. src/index.html для примера). А можно и не использовать.

Парадигма работы со стилями

Файл src/less/style.less — диспетчер подключений, в нем только импортируются другие файлы. Он компилируется в build/css/style.css, потом оптимизируется в build/css/style.min.css, который и подключается к HTML.

Папка src/less/components — для небольших less-файлов, описывающих стили блоков страницы.

Папка src/less/components/mixins — для примесей LESS.

Файлы src/less/components/sprite-1x.less и src/less/components/sprite-2x.less — результат работы процесса, собирающего растровый спрайт.

Дистрибутив содержит less-файлы Bootstrap, подключения которых изначально закомментированы (подключаются только переменные, примеси и normalize.less).

Парадигма работы с изображениями

Все файлы, которые нужно скопировать в build/img должны находиться в src/img. Если нужно хранить какие-либо исходные файлы, создайте подпапку в src/img. Подпапки из src/img не копируются в build/img при сборке.

Парадигма работы со скриптами

Весь проектный JS пишется в src/js/script.js. Плагины и дополнения нужно складывать в src/js/ (можно в подпапки) и прописывать их конкатенацию с src/js/script.js в секции concat файла Gruntfile.js

jQuery (если нужно) подключаем из CDN, с проверкой подгрузки и резервной подгрузкой со своего проекта в случае отказа CDN.

Папка src/js/vendors — для фреймфорков и отдельно подключаемых скриптов. Эта папка при сборке копируется в build/js.

Дистрибутив содержит js-файлы Bootstrap, которые не включены в собираемый единый js-файл.

Парадигма работы со шрифтами

Нижеследующие принципы не обязательны, но хороши и желательны.

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

Взято с css-live.ru.