- установите NodeJS (если требуется) и Yarn
- скачайте сборку с помощью Git:
git clone https://github.com/andreyalexeich/gulp-scss-starter.git - установите
gulpглобально:yarn global add gulp-cli - установите
bem-tools-coreглобально:yarn global add bem-tools-core - перейдите в скачанную папку со сборкой:
cd gulp-scss-starter - скачайте необходимые зависимости:
yarn - чтобы начать работу, введите команду:
yarn run dev(режим разработки) - чтобы собрать проект, введите команду
yarn run build(режим сборки)
gulp-scss-starter
├── dist
├── gulp-tasks
├── src
│ ├── blocks
│ ├── fonts
│ ├── img
│ ├── js
│ ├── styles
│ ├── views
│ └── .htaccess
├── gulpfile.babel.js
├── webpack.config.js
├── package.json
├── .babelrc.js
├── .bemrc.js
├── .eslintrc.json
├── .stylelintrc
├── .stylelintignore
└── .gitignore
- Корень папки:
.babelrc.js— настройки Babel.bemrc.js— настройки БЭМ.eslintrc.json— настройки ESLint.gitignore– запрет на отслеживание файлов Git'ом.stylelintrc— настройки Stylelint.stylelintignore– запрет на отслеживание файлов Stylelint'омgulpfile.babel.js— настройки Gulpwebpack.config.js— настройки Webpackpackage.json— список зависимостей
- Папка
src- используется во время разработки:- БЭМ-блоки:
src/blocks - шрифты:
src/fonts - изображения:
src/img - JS-файлы:
src/js - страницы сайта:
src/views/pages - SCSS-файлы:
src/styles - HTML-файлы:
src/views - конфигурационный файл веб-сервера Apache с настройками gzip (сжатие без потерь):
src/.htaccess
- БЭМ-блоки:
- Папка
dist- папка, из которой запускается локальный сервер для разработки (при запускеyarn run dev) - Папка
gulp-tasks- папка с Gulp-тасками
yarn run lint:styles- проверить SCSS-файлы. Для VSCode необходимо установить плагин. Для WebStorm или PHPStorm необходимо включить Stylelint вLanguages & Frameworks - Style Sheets - Stylelint(ошибки будут исправлены автоматически при сохранении файла)yarn run lint:styles --fix- исправить ошибки в SCSS-файлахyarn run lint:scripts- проверить JS-файлыyarn run lint:scripts --fix- исправить ошибки в JS-файлахyarn run dev- запуск сервера для разработки проектаyarn run build- собрать проект с оптимизацией без запуска сервераyarn run build:views- собрать HTML-файлыyarn run build:styles- скомпилировать SCSS-файлыyarn run build:scripts- собрать JS-файлыyarn run build:images- собрать изображенияyarn run build:webp- сконвертировать изображения в формат.webpyarn run build:sprites- собрать спрайтыyarn run build:fonts- собрать шрифтыyarn run build:favicons- собрать фавиконкиyarn run build:gzip- собрать конфигурацию Apache
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent