Шаблон для работы над проектом с использованием препроцессора Less и сборщика проектов Gulp.
Автор: Михаил Баринов
HTML-страницы собираются из отдельных частей с помощью плагина gulp-file-include. Стили пишутся с использованием препроцессора LESS, обрабатываются gulp-autoprefixer сжимаются и оптимизируются плагином gulp-csso. JS-файлы разбиты на модули, объединение и оптимизация происходит с помощью WEBPACK, через плагин webpack-stream. Изображения оптимизируются gulp-imagemin, растровые изображения дополнительно конвертируются в формат .webp с помощью gulp-webp, SVG файлы название которых начинается с «icon-» - собираются gulp-svgstore в спрайт. Браузерная совместимость описана в ключе browserlist в package.json, если коротко — «без IE11». Так же проект можно автоматически конвертировать в .zip gulp-zip формат, преобразовать к единому стилю написания кода благодаря prettier и проверить на стилевые и другие ошибки с помощью линтеров stylelint и eslint. Последние 3 функции запускаются автоматически в момент создания git commit и останавливают процесс коммита при выявлении ошибок. Все это благодаря использованию Git hooks и инструмента husky.
Mobile-first
npm install - установка зависимостей. (вкл. автоматическая инициализация git и установка husky)
npm start - сборка проекта в режиме разработки и запуск локального сервера.
npm run build - финальная сборка проекта.
npm run zip - финальная сборка проекта и упаковка его в zip-архив.
npm test - запуск теста на наличие стилистических ошибок.
├── .husky/ # каталог настроек инструмента husky
├── dist/ # каталог сборки проекта (cоздаётся автоматически)
├── gulpfile.js/ # каталог задач Gulp
├── src/ # каталог для размещения исходных файлов проекта
│ ├── fonts/ # каталог шрифтов
│ ├── img/ # каталог растровых и векторных изображений
│ │ ├── favicons/ # каталог дополнительных фавиконок
│ │ └── svg/ # каталог векторных изображений для генерации векторного спрайта
│ ├── js/ # каталог JS файлов
│ │ ├── modules/ # каталог отдельных модулей JS
│ │ └── index.js # основной js файл
│ ├── less/ # каталог файлов стилей .less
│ │ ├── fonts.less # файл подключения шрифтов
│ │ ├── mixins.less # файл с less-миксинами
│ │ ├── style.less # основной .less файл
│ │ └── variables.less # файл с less-переменными
│ ├── parts/ # каталог модулей html (собирается плагином gulp-file-include)
│ │ └── head.html # модуль html c содержимым тега <head> (для примера)
│ ├── favicon.svg # основная фавиконка
│ └── index.html # основной файл разметки страницы
├── .editorconfig # файл конфигурации настроек редактора
├── .eslintrc # файл конфигурации ESLint
├── .gitignore # файл исключений Git
├── .prettierrc # файл конфигурации Prettier
├── .stylelintrc.json # файл конфигурации Stylelint
├── gulpfile.js # основной файл конфигурации Gulp
├── package.json # файл npm зависимостей и настроек проекта
├── package-lock.json # lock-файл npm
├── README.md # документация проекта
├── version.json # файл с номером актуальной версии проекта (cоздаётся автоматически)