Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/denisraymer/top-news-israel
News site layout using GULP, BEM, BABEL, WEBPACK, SCSS, SMART-GRID
https://github.com/denisraymer/top-news-israel
babel bem-methodology bootstrap gulp gulpjs html javascript scss smart-grid webpack
Last synced: 2 months ago
JSON representation
News site layout using GULP, BEM, BABEL, WEBPACK, SCSS, SMART-GRID
- Host: GitHub
- URL: https://github.com/denisraymer/top-news-israel
- Owner: denisraymer
- License: mit
- Created: 2020-04-22T19:14:09.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-11-19T16:55:43.000Z (about 4 years ago)
- Last Synced: 2024-09-28T06:42:00.252Z (3 months ago)
- Topics: babel, bem-methodology, bootstrap, gulp, gulpjs, html, javascript, scss, smart-grid, webpack
- Language: HTML
- Homepage: https://denisraymer.github.io/top-news-israel/
- Size: 32.7 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Правила именования коммитов
##### 📦 NEW
* Использовать, при добавлении чего-то совершенно нового
##### 👌 IMPROVE
* Использовать, при улучшении/улучшении части кода, рефакторинга и т.д
##### 🐛 FIX
* Использовать, при исправлении ошибки
##### 📖 DOC
* Использовать при изменении документации как readme.md, или даже встроенные документы
##### 🚀 RELEASE
* Использовать, при выпуске новой версии. Version 2.0.0
##### 🤖 TEST
* Использовать, если что-то связано с тестированием.
## Особенности
* именование классов по [БЭМ](https://ru.bem.info/)
* используется БЭМ-структура
* используется препроцессор [SCSS](https://sass-lang.com/)
* используется транспайлер [Babel](https://babeljs.io/) для поддержки современного JavaScript (ES6) в браузерах
* используется [Webpack](https://webpack.js.org/) для сборки JavaScript-модулей
* используется CSS-сетка [smart-grid](https://github.com/dmitry-lavrik/smart-grid) на основе Bootstrap для быстрой адаптивной вёрстки
* используется жёсткий кодгайд
* используется проверка кода на ошибки перед коммитом
## Установка
* установите [NodeJS](https://nodejs.org/en/) (если требуется) и [Yarn](https://yarnpkg.com/en/docs/install)
* скачайте сборку с помощью [Git](https://git-scm.com/downloads): ```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``` (режим сборки)
Если вы всё сделали правильно, у вас должен открыться браузер с локальным сервером. Режим сборки предполагает оптимизацию проекта: сжатие изображений, минифицирование CSS и JS-файлов для загрузки на сервер.
## Файловая структура
```
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``` — настройки Gulp
* ```webpack.config.js``` — настройки Webpack
* ```package.json``` — список зависимостей
* Папка ```src``` - используется во время разработки:
* БЭМ-блоки: ```src/blocks```
* шрифты: ```src/fonts```
* изображения: ```src/img```
* JS-файлы: ```src/js```
* страницы сайта: ```src/views/pages```
* SCSS-файлы: ```src/styles```
* HTML-файлы: ```src/views```
* конфигурационный файл веб-сервера Apache с настройками [gzip](https://habr.com/ru/post/221849/) (сжатие без потерь): ```src/.htaccess```
* Папка ```dist``` - папка, из которой запускается локальный сервер для разработки (при запуске ```yarn run dev```)
* Папка ```gulp-tasks``` - папка с Gulp-тасками
## Команды
* ```yarn run lint:styles``` - проверить SCSS-файлы. Для VSCode необходимо установить [плагин](https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint). Для 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``` - сконвертировать изображения в формат ```.webp```
* ```yarn run build:sprites```- собрать спрайты
* ```yarn run build:fonts``` - собрать шрифты
* ```yarn run build:favicons``` - собрать фавиконки
* ```yarn run build:gzip``` - собрать конфигурацию Apache
## Рекомендации по использованию
### Компонентный подход к разработке сайтов
* каждый БЭМ-блок имеет свою папку внутри ```src/blocks/modules```
* папка одного БЭМ-блока содержит в себе один HTML-файл, один SCSS-файл и один JS-файл (если у блока используется скрипт)
* HTML-файл блока импортируется в файл ```src/views/index.html``` (или в необходимый файл страницы, откуда будет вызываться блок)
* SCSS-файл блока импортируется в файл ```src/blocks/modules/_modules.scss```
* JS-файл блока импортируется в ```src/js/import/modules.js```
Пример структуры папки с БЭМ-блоком:
```
blocks
├── modules
│ ├──header
│ │ ├── header.html
│ │ ├── header.js
│ │ ├── header.scss
```
Чтобы вручную не создавать соответствующие папку и файлы, достаточно в консоли прописать команду ```bem create my-block``` - для создания папки БЭМ-блока, где ```my-block``` - имя БЭМ-блока
### Страницы проекта
* страницы проекта находятся в папке ```src/views/pages```
* главная страница: ```src/views/index.html```
### Шрифты
* шрифты находятся в папке ```src/fonts```
* используйте [форматы](https://caniuse.com/#search=woff) ```.woff``` и ```.woff2```
* шрифты подключаются в файл ```src/styles/base/_fonts.scss```
* сконвертировать локальные шрифты можно с помощью [данного сервиса](https://onlinefontconverter.com/)
### Изображения
* изображения находятся в папке ```src/img```
* изображение для генерации фавиконок должно находиться в папке ```src/img/favicon``` и иметь размер не менее ```1024px x 1024px```
* изображения автоматически конвертируются в формат ```.webp```. Подробная информация по использованию [тут](https://vk.com/@vk_it-webp).
### Сторонние библиотеки
* все сторонние библиотеки устанавливаются в папку ```node_modules```
* для их загрузки воспользуйтеcь командой ```yarn add package_name```
* для подключения JS-файлов библиотек импортируйте их в самом начале JS-файла БЭМ-блока (то есть тот БЭМ-блок, который использует скрипт), например:
```javascript
import $ from "jquery";
```
* для подключения стилевых файлов библиотек импортируйте их в файл ```src/styles/vendor/_libs.scss```
* JS-файлы и стилевые файлы библиотек самостоятельно изменять нельзя
:warning: Если в вашем проекте используется несколько библиотек, которые необходимо подключать на нескольких страницах, во избежании ошибок нужно:
* по пути ```src/js/import``` создать папку ```pages```
* в папке ```pages``` создать js-файл для страницы, например, ```pageA.js```, и импортировать туда библиотеку, которая будет использоваться только на этой странице
* аналогично проделать шаг для дополнительных страниц
* в файле ```webpack.config.js``` в точку входа добавить js-файлы страниц, пример:
```javascript
entry: {
main: "./src/js/index.js",
pageA: "./src/js/import/pages/pageA.js",
pageB: "./src/js/import/pages/pageB.js"
}
```
* подключить скомпилированные js-файлы на необходимых страницах
## CSS-сетка smart-grid
В сборщик включена CSS-сетка [smart-grid](https://github.com/dmitry-lavrik/smart-grid) от [Дмитрия Лаврика](https://dmitrylavrik.ru/). Она позволяет избавиться от
лишних классов в разметке за счёт использования примесей в SCSS и ускоряет адаптивную вёрстку. Конфигурация уже настроена в соответствии с сеткой [Bootstrap](https://getbootstrap.com/). Пример использования:
**SCSS**
```scss
.items{
@include row-flex();
@include md(justify-content, center);
.item{
@include col();
@include size(3);
@include size-md(5);
@include size-xs(10);
}
}
```
**Результат**
```css
.items {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
}
.items .item {
box-sizing: border-box;
margin-left: 15px;
margin-right: 15px;
word-wrap: break-word;
width: calc(100% / 12 * 3 - 30px);
}
@media screen and (max-width: 992px) {
.items {
justify-content: center;
}
.items .item {
width: calc(100% / 12 * 5 - 30px);
}
}
@media screen and (max-width: 576px) {
.items .item {
width: calc(100% / 12 * 10 - 30px);
}
}
```