Супероптимизированный шаблон для верстальщиков.
Основа: Gulp, Pug, SCSS.
Создан на основе этого HTML5 шаблона: OptimizedHTML 5
С использованием этого шаблона был написан мой сайт-визитка: arhipov.me
- Написал аналог основных JQuery функций, для работы с dom и вынес их в небольшую библиотеку SJQuery. Это в десятки раз уменьшает размер выходного js файла. Если в верстке не используется 95% возможностей JQuery, нет смысла включать всю библиотеку.
- Включил в сборку fontello, это сервис, который позволяет убрать из файла шрифтов fontawesome все неиспользуемые иконки, что уменьшает размер файла шрифтов на порядок.
- Для минимизации css добавил пакет purge-css. Он анализирует все файлы проекта и на основе этого убирает из выходного css неиспользуемые классы. Результат его работы лучше, чем и css-nano и cssco
- Для минификации html добавил пакет html-minifier-terser
- Так же в проект включил свои scss миксины, шаблоны и переменные, поддержку pug файлов, node-sass-magic-importer, gulp-rsync, gulp-size, gulp-plumber, merge-stream.
app/ - файлы проекта
app/scss/core - миксины и файлы для настройки всего проекта, точка входа - index.scss
app/scss/templates - миксины для компонентов
app/scss/layouts - разметка страниц, соответствуют pug/layouts
app/scss/pages - стили страниц, соответствуют pug/pages
app/scss/partials - стили компонентов, соответствуют pug/partitials
app/pug - всё, что касается pug, точка входа - index.pug
app/pug/pages - шаблоны страницы
app/pug/partials - шаблоны компонентов
app/pug/layouts - разметка страниц
app/fonts/ - шрифты
app/images/ - изображения
app/js/ - javascript, точка входа - index.js
dist/ - файлы сборки (эту папку можно заливать на хостинг)
gulpfile.js - конфигурация gulp.
- Устанавливаем все npm пакеты командой
npm install - Cтартуем сборку командой
gulp
Из коробки сборка будет проходить сразу в PROD режиме, т.е. все плагины для оптимизации будут включены. Чтобы сборка начала работать в DEV версии, в файле gulpfile.js нужно закомментировать указанные строчки