Проект базируется на gulp 4.0, webpack, babel. Так же хочу отметить, что сборка на данный момент может содержать ошибки или неоптимизированные моменты. Другими словами местами она "сыра", т.к. слабо обкатана на реальных проектах.
npm install
bower install
gulp serve - запускает локальный сервер и browser-sync.
gulp build - подготавливает файлов в продакшн и отправляет их в папку prod
Есть два способа создать css файл. Оба активно используются. Основной - при разработке из папки dev/styles будут обработаны все scss и sass файлы,которые не начинаются на "_" и "__", затем перемещены в dev/css. Вспомогательный - способ базируется на поведении пакета gulp-useref. На данным момент он применён только в head.php и запускается только при build`е. Он собирает все файлы в определённой области и склеивает их в 1. В данный момент он также склеит стили боуера. Этот способ подходит для работы с стилями плагинов, т.к. в случае с боуером они автоматически записываются в head.php.
Т.к. вебпаку необходимо создавать бандлы, то они хранятся отдельно от папки разработки скриптов. Папки разделены на scripts и scripts_source.
Входной точкой считаются файлы "bundle.*.js". Содержимое папок modules и plugins пока так же копируется.
Для внедрения вседоступных переменных стоит использовать настройки вебпака. Текущий фрагмент из gulp-tasks/scripts.js:
new webpack.ProvidePlugin({
'$': 'jquery',
'jQuery': 'jquery',
}),
Для остальных случаев, когда пакет не предполагается, можно использовать объект _GLOB, который находится в dev/scripts/config.js.
dev/scripts/config.js предполагается использовать для различных настроек, которые могут понадобится как в разных частях кода (брикпоинты), так и для настройки со стороны бекенда (установка url, фразы вставляемые через js для запросов или картинок меток на карте)
На данный момент у сборки есть 1 проблема, связанная с генерацией динамических модулей. Дело в том, что для работы такого модуля нужно вставить<script> с определённым src, полный путь которого неизвестен изначально.
В силу этого вебпаку необходимо задавать этот момент вручную и при переносе на бекенд могут возникнуть трудности. Т.к. это динампические модули, ошибка может быть замечена не сразу и для избежания этого рекомендуется уточнять у бекенд-разработчика настройку предполагаемого пути.
Настроить этот путь можно в ./config.js в config.scriptsDynamicPath. В данный момент стоит значение стоит как "/scripts/" для продакшена и "../scripts/" для разработки.
Для знакомства с динамической подгрузкой можно ознакомится с:
Часть документации webpack
Часть скринкастов по webpack - Часть 4.1 и 4.2