Внимание! Данный проект больше не поддерживается. Альтернатива с поддержкой webpack и es6: https://gitlab.com/Bronner/encore-demo-template
Этот проект предназначен для быстрой и удобной разработки современных, адаптивных и оптимизированных HTML страниц.
Процесс сборки построен таким образом, что позволяет с легкостью переносить вёрстку на любой фреймворк или CMS. Учтены многие аспекты совместимости с различными подходами и инструментами разработки.
- Исходный код: https://github.com/TeroBlaZe/starter-template
- Сборка при помощи Gulp
- Подключение любых библиотек из репозиториев NPM при помощи Yarn
- Живая перезагрузка страницы с помощью BrowserSync, даже если сайт уже работает на PHP.
- Source-Maps
- Auto-Prefixer
- Сборка и минификация sass, js и css
- Настраиваемая оптимизация изображений
- Простой шаблонизатор для HTML gulp-file-include
- Предустановленые JQuery, FancyBox, Bootstrap 4 Grid
Перед началом работы необходимо установить последнюю версию Node и NPM с официального сайта Node
- Установить gulp
sudo npm i -g gulp-cli
- Установить Yarn подходящим способом для своей ОС с официального сайта Yarn
- Установить зависимости командой
yarn
- Запустить BrowserSync, начать работу
gulp live
Исходный код расположен в директории assets.
Директория static содержит минифицированные версии файлов, создаваемые при выполнении команды gulp
gulp- Запускет полную сборку (стили, скрипты, шрифты, изображения и т.д)gulp watch- Запускает слежение за изменениями файлов, без использования BrowserSyncgulp live- Запускает BrowserSync для обновления страницы в реальном времени
Так же возможен запуск отдельных задач
gulp assets- Собирает assets проектаgulp vendor- Собирает библиотеки vendorgulp images- Собирает изображения assetsgulp styles- Собирает стили assetsgulp scripts- Собирает скрипты assetsgulp fonts- Собирает шрифты assetsgulp html- Собирает шаблон assets
yarn add [название библиотеки]- Добавление библиотекиyarn remove [название библиотеки]- Удаление библиотекиyarn upgrade- Обновление всех или отдельной зависимостей
Ручное изменение файла package.json, использование dist-версий и отдельных файлов библитек НЕ РЕКОМЕНДУЕТСЯ
Для разработки рекомендуется подключать библиотеки при помощи Yarn. При этом нет необходимости копировать файлы библиотек
из директории node_modules, вместо копирования нужно подключать их напрямую из этой директории.
В файле libs.js указываются пути к библиотекам.
{
styles: {
css: [
'node_modules/@fancyapps/fancybox/dist/jquery.fancybox.css',
],
sass: [
'node_modules/bootstrap-4-grid/scss/grid.scss',
],
},
scripts: [
'node_modules/jquery/dist/jquery.min.js',
'node_modules/@fancyapps/fancybox/dist/jquery.fancybox.js',
],
}Хотя этот способ не так актуален для новых проектов, но может пригодиться для переноса legacy проектов или библиотек.
Файлы библиотеки или её части размещается в директори /assets/vendor/<название_библиотеки>
Затем, как и в случае с библиотеками, подключенными через Yarn, необходимо добавить путь в libs.js
В момент сборки все файлы будут сжаты в единый файл vendor.min.js или vendor.min.css
В файле options.js содержатся настройки сборки.
- enableIntegration - Включает режим интеграции. При включении не происходит сборка
templates - proxyHost - Хост для проксирования BrowserSync
openBrowser - Открывает окно браузера при запуске browser-sync- notifications - Выводит уведомления о выполнении определенных задач
- srcDir - Директория с исходными файлами проекта
- destDir - Директория, в которую происходит сборка проекта
- jpeg - Параметры работы плагина сжатия jpegoptim
- png - Параметры работы плагина сжатия pngquant
Данный режим позволяет работать BrowserSync даже когда сайт работает на внешнем вебсервере. Например, полезно при переносе вёрстки на CMS.
Для включения необходимо задать enableIntegration: true и указать в качестве значения proxyHost домен,
на котором запущен локальный вебсайт.
- Настройка
enableIntegrationудаляет все файлы и директории изdestDir, поэтому будьте внимательны, указывая путь в переменнойdestDir
Для поддержания шаблона сборки в актуальном состоянии необходимо выполнить несколько простых действий:
- Обновить файл
gulpfile.jsпутём замены - Обновить файл
package.json. Для этого нужно заменить его новым и перенести старый блокdependenciesв новый файл - Проверить соответствие структуры файла
libs.jsс актуальной версией - Проверить файл
options.jsна присутствие в нём всех необходимых настроек и значений - Обновить файлы
README.mdи.gitignore