В ней есть оптимизация и минимизация:
- JavaScript (babel, core-js)
- SCSS
- HTML
- Сжатие картинок
- Работа со шрифтами
- Проверка кода ESLint
- Поддержка сетки smart-grid (это миксины, которые облегчают адаптивную верстку проекта, как в bootstrap: xs,sm,md,lg,xl)
- Webpack-dev-server
- Поддержка jest с покрытием кода
- Возможность использования глобальных переменных ENV
- Описание ошибок выводится прямо в браузере
- Включен плагин, позволяющий удалять блоки кода, например при выводе в продакшен
если нужна сборка с Vue и Vuex то она тут https://github.com/abyss-soft/webpack-template-base_vue_vuex
если нужна сборка с шаблонизатором Pug, то она тут https://github.com/abyss-soft/webpack-template-base_Pug
если нужна простая сборка с gulp 4.0, то она тут https://github.com/abyss-soft/gulp4-html
если нужна простая сборка с gulp 3.9, то она тут https://github.com/abyss-soft/gulp-html
Клонируем к себе репозиторий
Сделайте git clone
Смените директорию cd webpack-template-base
Запустите npm install
даем команду npm run smart-grid
в папке SCSS/UTILS появляется файл _smart-grid.scss
его нужно подключить туда, где хотите применять сетку
даем команду npm run dev
Получаем комфортную среду для отладки, есть карты кода (source maps)
переменные экспортируются в файле webpack.dev.conf.js
Например:
APP_ENV: JSON.stringify(process.env.APP_ENV),
API_KEY: JSON.stringify(process.env.API_KEY)
Использовать в коде можно например так:
if (APP_ENV === "dev") {..код для разработки..}
Или так, используя глобальную переменную process.env:
if (process.env.NODE_ENV !== `production`) {..код только для разработки, в продакшен не попадет..}
удаление блоков кода в HTML:
все что находится между блоками deletestart ... deleteend будет удалено
если использовали глобальные переменные, то устанавливаем переменную APP_ENV=prod
даем команду npm run prod
Получаем папку dist содержащую минимизированный / сжатый код
даем команду npm run lint
даем команду npm run test