https://github.com/vaban-ru/gulp-template
Шаблон для верстки. Используется SCSS, PostHTML и автоматическая генерация SVG спрайтов
https://github.com/vaban-ru/gulp-template
babel css gulp html js postcss posthtml scss
Last synced: 4 months ago
JSON representation
Шаблон для верстки. Используется SCSS, PostHTML и автоматическая генерация SVG спрайтов
- Host: GitHub
- URL: https://github.com/vaban-ru/gulp-template
- Owner: vaban-ru
- Created: 2019-09-10T17:55:38.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-09-26T11:16:23.000Z (over 2 years ago)
- Last Synced: 2023-09-26T13:45:02.157Z (over 2 years ago)
- Topics: babel, css, gulp, html, js, postcss, posthtml, scss
- Language: JavaScript
- Homepage:
- Size: 405 KB
- Stars: 34
- Watchers: 3
- Forks: 17
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Сборка для верстки
## Подготовка к работе
1. `git clone git@github.com:webzlodimir/gulp-template.git`
2. `cd gulp-template`
3. `yarn install`
4. `yarn start`
## Структура проекта
```
gulp-template
├── src
│ ├── css
│ ├── fonts
│ ├── img
│ ├── svg
│ ├── js
│ ├── sass
│ ├── public
│ ├── templates
│ └── pages
├── package.json
├── README.md
├── gulpfile.js
├── .babelrc
├── .browserslistrc
├── .prettierrc
├── .prettierignore
└── .gitignore
```
* Корень проекта:
* ```.babelrc``` — настройки Babel
* ```.prettierrc``` — настройки Prettier
* ```.prettierignore``` — запрет изменения файлов Prettier
* ```.gitignore``` – запрет на отслеживание файлов Git'ом
* ```package.json``` — список зависимостей
* ```README.md``` — описание проекта
* ```gulpfile.js``` — файл конфигурации Gulp
* ```.browserslistrc``` — файл конфигурации поддерживаемых версий браузеров
* Папка ```src``` - используется во время разработки:
* ```css``` — директория для файлов css библиотек, изначально тут лежит файл сброса стилей
* ```fonts``` – директория для шрифтов
* ```img``` — директория для изображений
* ```svg``` — папка для SVG файлов, для последующей генерации SVG спрайта которые автоматически сгенерируется в папке img
* ```js``` — директория для js библиотек. Здесь лежит:
- `app.js` для кастомного кода;
- `ofi.min.js` - полифил для CSS-свойства `object-fit`;
- `lazysizes.min.js` - [библиотека для lazy-load изображений](https://github.com/aFarkas/lazysizes);
- `imask.min.js` - [библиотека маски](https://imask.js.org/guide.html).
* ```sass``` — директория для sass файлов
* ```public``` — директория для пользовательских файлов, все файлы из неё будут скопированы в корень собранного проекта
* ```templates``` — директория для html файлов которые добавляются в проекте
* ```pages``` — директория для html страниц
## Миксины и прочее
Изначально есть пара полезных вещей:
- В сборке установлена автоматическая генерация SVG спрайта, для этого необходимо добавить файлы в папку src/svg, после чего в папке dist/img сгенерируется спрайт с именем sprite.svg. В нём каждый SVG файл будет иметь айдишник равный названию самого файла.
- `@include font-face("FuturaPT", "/fonts/FuturaPT-Book", 300);` - позволяет подключать шрифты в 1 строку.
- `@include object-fit(cover)` - используется для полифила CSS-свойства object-fit
- На тег `html` автоматически вешается класс `is-mac` или `is-ios` для определения устройства
## Верстка
Команды для сборки:
- `yarn start` запускает сборку и локальный сервер с Hot Reloading
- `yarn build` запускает сборку и на выходе получаем собранные, но не минифицированные файлы app.js и app.css для последующей передачи программистам
## PostHTML
Для расстановки правильных переносов используется плагин [PostHTML Richtypo](https://github.com/Grawl/posthtml-richtypo). Для блока в котором вы хотите отформатировать текст необходимо указать атрибут `data-typo`:
```
Тут текст
```
Для шаблонизации в проекте используется [Gulp PostHTML](https://github.com/posthtml/gulp-posthtml) с плагинами [PostHTML Include](https://github.com/posthtml/posthtml-include) и [PostHTML Expressions](https://github.com/posthtml/posthtml-expressions)
### Добавление файлов
Что бы просто вставить один файл в другой используется конструкция ``, пример кода:
```
```
### Компоненты
Для того что бы извне передать в вставляемый файл какие либо данные необходимо использовать директиву `locals`, и передать туда данные в виде JSON объекта, пример кода:
```
```
### Условия
Внутри любого файла можно использовать разные условия, пример кода:
```
Foo really is bar! Revolutionary!
Foo is wow, oh man.
Foo is probably just foo in the end.
```
Так же можно использовать конструкцию `switch/case`, пример кода:
```
Foo really is bar! Revolutionary!
Foo is wow, oh man.
Foo is probably just foo in the end.
```
### Циклы
В любом файле так же можно перебирать данные (массивы или объекты) с помощью цикла, пример кода:
#### Массив
```
{{ index }}: {{ item }}
```
#### Объект
```
{{ key }}: {{ value }}
```
Так же не обязательно передавать данные через переменную, их просто можно написать в цикл, пример кода:
```
{{ item }}
```
В цикле вы можете использовать уже готовые переменные для выборки определенных элементов:
* `loop.index` - текущий индекс элемента, начинается с 0
* `loop.remaining` - количество оставшихся до конца итераций
* `loop.first` - булевый указатель, что элемент первый
* `loop.last` - булевый указатель, что элемент последний
* `loop.length` - количество элементов