Внимание! Данный проект больше не поддерживается. Альтернатива с поддержкой 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

1. Установить gulp

   sudo npm i -g gulp-cli

2. Установить Yarn подходящим способом для своей ОС с официального сайта Yarn
3. Установить зависимости командой

   yarn

4. Запустить BrowserSync, начать работу

   gulp live
   

Исходный код расположен в директории assets. Директория static содержит минифицированные версии файлов, создаваемые при выполнении команды gulp

• gulp - Запускет полную сборку (стили, скрипты, шрифты, изображения и т.д)
• gulp watch - Запускает слежение за изменениями файлов, без использования BrowserSync
• gulp live - Запускает BrowserSync для обновления страницы в реальном времени

Так же возможен запуск отдельных задач

• gulp assets - Собирает assets проекта
• gulp vendor - Собирает библиотеки vendor
• gulp images - Собирает изображения assets
• gulp styles - Собирает стили assets
• gulp scripts - Собирает скрипты assets
• gulp fonts - Собирает шрифты assets
• gulp 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

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

1. Обновить файл gulpfile.js путём замены
2. Обновить файл package.json. Для этого нужно заменить его новым и перенести старый блок dependencies в новый файл
3. Проверить соответствие структуры файла libs.js с актуальной версией
4. Проверить файл options.js на присутствие в нём всех необходимых настроек и значений
5. Обновить файлы README.md и .gitignore