В сборщике используются:
Клонируем репозиторий, переходим в папку и вводим команду:
$ npm/yarn installМенеджер пакетов Yarn можно скачать отсюда. Чем отличаются npm и yarn можно узнать здесь. Затем запускаем сборку командой:
$ npm/yarn start (или просто gulp)Запускается таск gulp'а по умолчанию - dev.
Конфиг BrowserSync в сборке:
browserSync: {
port: PORT || 3000,
open: !!OPEN,
notify: false,
reloadOnRestart: true,
server: {
baseDir: build.dest,
directory: true
}
}
Для запуска на другом порте введите в консоли:
PORT=8080 yarn startДля открытия вкладки в браузере:
OPEN=true yarn startЗапуск команды gulp с флагом --production или --prod выполняет таски для продакшена - минифицирует CSS и JS, группирует медиазапросы, оптимизирует изображения. Для отмены минификации следует запустить --production --nominify. Команда gulp build единожды собирает исходники в конечную папку. gulp clean удаляет папку build.
├── build/ # Сборка (автогенерация)
│ ├── assets/ # Подключаемые ресурсы
│ │ ├── css/ # Стили
│ │ ├── favicon/ # Фавиконки
│ │ ├── fonts/ # Шрифты
│ │ ├── img/ # Изображения
│ │ └── js/ # Скрипты
│ └── index.html # Страница
├── gulp/ # Подключаемые скрипты с задачами для gulpfile.babel.js
│ ├── tasks/ # Страницы
│ │ │── assets.js # Копирование подключаемых ресурсов в build, сжатие изображений
│ │ │── build.js # Запуск задач build
│ │ │── clean.js # Удаление собранного билда
│ │ │── css.js # Сборка стилей
│ │ │── dev.js # Запуск задач dev
│ │ │── html.js # Сборка html из twig
│ │ │── scripts.js # Сборка скриптов
│ │ │── server.js # Локальный сервер
│ │ │── sprites.js # Сборка спрайтов
│ │ └── watch.js # Отслеживание изменений и запуск задач
│ └── config.js # Конфигурация для задач
├── src/ # Исходные файлы
│ ├── assets/ # Подключаемые ресурсы
│ │ │── favicon/ # Фавикон
│ │ │── fonts/ # Шрифты
│ │ │── img/ # Изображения
│ │ └── svg_icons/ # Иконки в svg для подключения на страницу
│ ├── css/ # Стили
│ │ │── blocks/ # Стили блоков
│ │ │── _base.scss # Базовые стили
│ │ │── _fonts.scss # Подключение шрифтов
│ │ │── _mixins.scss # Миксины
│ │ │── _variables.scss # Переменные
│ │ └── _main.scss # Импорт всех остальных файлов
│ ├── js/ # Скрипты
│ │ │── scripts/ # Файлы скриптов
│ │ │── main.js # Импорт скриптов из папки scripts
│ │ └── vendor.js # Сторонние скрипты
│ ├── templates/ # Шаблоны twig
│ │ │── includes/ # Подключаемые шаблоны twig
│ │ │ └── icons.svg # Собранные иконки для подключения на страницу (автогенерация)
│ │ └── base.twig # Базовый шаблон
│ └── index.twig # Страница
├── .babelrc # Конфигурация babel
├── .editorconfig # Конфигурация настроек редактора кода
├── .gitignore # Список исключённых файлов из git
├── gulpfile.babel.js # Файл для запуска gulp
├── package.json # Список зависимостей и другой информации
└── readme.md # Документация
Все ресурсы будут адресоваться относительно папки build в разработке и относительно корня сервера после подключения к бэкенду. Поэтому внутри css-файла, все пути должны начинаться с ../img, а не /assets/img и т.д.
Картинки в коде можно писать просто с /assets, т.к. все равно путь не угадать во время верстки.
Для подключения js скриптов используется gulp-include (т.к. в сборщике нет Webpack'а, скрипты не собираются в один бандл, для этого как раз и нужен gulp-include). Рекомендуется использовать менеджер пакетов для добавления сторонних скриптов в проект. Подключение в vendor.js осуществляется таким образом:
//=require jquery/dist/jquery.min.js (пример подключения из node_modules)
Примеры подключения есть в стартовой сборке, файлы main.js и vendor.js удалять не следует. В скриптах допускается использовать ES6 синтаксис, Babel все обработает, на выходе получите ES5 версию.
SVG иконки собираются в один файл и подключаются инлайново в базовом шаблоне twig. В HTML разметку вставляются следующим образом:
<svg class="image">
<use xlink:href="#logotype"></use>
</svg>Где logotype - имя файла SVG. Иконки нужно располагать в src/assets/svg_icons, конечный файл лежит в src/templates/includes/icons.svg
Для кроссбраузерности установлена библиотека svg4everybody.