Skip to content

Commit 97494d4

Browse files
firefoxicfirefoxic
committed
Fix typo and markdown
1 parent 7ce996c commit 97494d4

File tree

1 file changed

+137
-98
lines changed

1 file changed

+137
-98
lines changed

‎README.md‎

Lines changed: 137 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,108 +1,138 @@
1-
# Сборка для HTML-курсов в HTML Academy
2-
Сборка работает на gulp 4 версии
1+
# Сборка для HTML-курсов в HTML Academy
2+
3+
Сборка работает на gulp 4 версии
34

45
## Начало
5-
Для работы с репозиторием на вашем компьютере потребуется Git и Node.js (18.x.x). Перед началом работы убедитесь, что все программы работают. Для этого в терминале введите:
6-
- для git
7-
```bash
8-
git --version
9-
```
10-
git примерно ответит
11-
```bash
12-
git version 2.42.0.windows.1
13-
```
146

15-
![проверка версии git](assets/git.png)
7+
Для работы с репозиторием на вашем компьютере потребуется _Git_ и _Node.js_. Перед началом работы убедитесь, что все программы работают. Для этого в терминале введите:
168

17-
версия не важна. Главное, что git отреагировал и написал ответ
9+
- для _Git_
1810

19-
- для node.js
20-
```bash
21-
node -v
22-
```
23-
node.js примерно ответит
24-
```bash
25-
v18.18.0
26-
```
11+
```shell
12+
git --version
13+
```
14+
15+
_Git_ примерно ответит
16+
17+
```shell
18+
git version 2.42.0.windows.1
19+
```
20+
21+
![проверка версии git](assets/git.png)
22+
23+
версия не важна. Главное, что git отреагировал и написал ответ
24+
25+
- для _Node.js_
26+
27+
```shell
28+
node -v
29+
```
30+
31+
_Node.js_ примерно ответит
32+
33+
```shell
34+
v18.18.0
35+
```
36+
37+
![проверка версии node.js](assets/node.png)
38+
39+
важно, чтобы была действующая LTS версия (первое число — чётное), то есть не ниже 20.9 или не ниже 18.18.
40+
41+
## Установка
42+
43+
1. Клонируйте репозиторий:
44+
45+
```shell
46+
git clone git@github.com:htmlacademy/html2-basic-template.git
47+
```
48+
49+
2. Установите зависимости проекта:
2750

28-
![проверка версии node.js](assets/node.png)
51+
```shell
52+
npm ci
53+
```
2954

30-
важно, чтобы версия была 18.x.x.
55+
3. Начните работу (должен запуститься браузер):
3156

32-
# Установка
33-
1. Клонируйте репозиторий `git clone git@github.com:htmlacademy/html2-basic-template.git`
34-
2. Установите зависимости проекта `npm ci`
35-
3. Начните работу `npm start` // должен запуститься браузер
57+
```shell
58+
npm start
59+
```
3660

3761
## Структура папок
38-
В каждой папке есть Readme.md файл, который имеет более полное описание по работе с папкой
3962

40-
```
41-
├── .github/ # Специальная папка для github
42-
│ └── workflows/ # Автоматизация для github actions
43-
│ ├── check.yml # Запускает линтеры на Гитхабе
44-
│ └── gh-pages.yml # Публикует проект и создаёт ссылку на проект
63+
В каждой папке есть `README.md` файл, который имеет более полное описание по работе с папкой
64+
65+
```shell
66+
├── .github/ # Специальная папка для github
67+
│ └── workflows/ # Автоматизация для github actions
68+
│ ├── check.yml # Запускает линтеры на Гитхабе
69+
│ └── gh-pages.yml # Публикует проект и создаёт ссылку на проект
4570
├── source/ # Исходники проекта
46-
│ ├── fonts/ # Папка для шрифтов
47-
│ ├── images/ # Папка для хранения картинок
48-
│ │ └── icons/ # Специальная папка для преобразования svg в спрайт(stack)
71+
│ ├── fonts/ # Папка для шрифтов
72+
│ ├── images/ # Папка для хранения картинок
73+
│ │ └── icons/ # Специальная папка для преобразования svg в спрайт(stack)
4974
│ ├── js # Скрипты
5075
│ │ └── script.js # Главный скрипт
51-
│ ├── sass/ # Папка для препроцессорных файлов sass
76+
│ ├── sass/ # Папка для препроцессорных файлов sass
5277
│ │ └── blocks/ # Стили БЭМ-блоков
53-
│ │ └── header.scss # Стили для конкретного БЭМ-блока
54-
│ │ └── global # Файл для подключения стилей библиотек из папки
55-
│ │ ├── fonts.scss # Подключение шрифтов к проекту
78+
│ │ └── header.scss # Стили для конкретного БЭМ-блока
79+
│ │ └── global # Файл для подключения стилей библиотек из папки
80+
│ │ ├── fonts.scss # Подключение шрифтов к проекту
5681
│ │ ├── global.scss # Глобальные стили, которые касаются всего проекта
57-
│ │ └── variables.scss # Переменные для всего проекта
58-
│ ├── vendor # Папка для сторонних бибилотек
59-
│ └── index.html # HTML-файл для главной страницы
82+
│ │ └── variables.scss # Переменные для всего проекта
83+
│ ├── vendor # Папка для сторонних бибилотек
84+
│ └── index.html # HTML-файл для главной страницы
6085
└── .editorconfig # Настройки форматирования текстовых файлов
61-
└── .gitignore # Настройки игнорирования файлов для git
62-
└── .stylelintrc # Правила для stylelint
63-
└── gulpfile.js # Автоматизация для Gulp
86+
└── .gitignore # Настройки игнорирования файлов для git
87+
└── .stylelintrc # Правила для stylelint
88+
└── gulpfile.js # Автоматизация для Gulp
6489
└── package.json # Зависимости проекта, скрипты, настройки проекта
6590
└── package-lock.json # Зависимости проекта
6691
└── README.md # Документация
6792
```
6893

6994
## Основные команды
70-
- `npm start` - запускает сборку с сервером для разработки проекта
71-
- `npm run build` - создаёт папку `build` с оптимизированными файлами для продакшена
95+
96+
- `npm start` - запускает сборку с сервером для разработки проекта
97+
- `npm run build` - создаёт папку `build` с оптимизированными файлами для продакшена
7298

7399
## Дополнительные команды
74-
- `npm run optimizeImages` - создаёт оптимизированные изображения в `source/images/`
75-
- `npm run preview` - посмотреть результат работы prod-версии сборки
76-
- `npm run lint` - запустить все проверки. Занимает длительное время
77-
- `npm run lint:bem` - проверить правильно использования БЭМ
78-
- `npm run lint:markup` - проверить HTML-разметку через W3C-валидатор
79-
- `npm run lint:styles` - проверить проект на совместимость с stylelint
80-
- `npm run lint:spaces` - проверить отступы с помощью editorConfig
81-
- `npm run lint:html` - проверить разметку по правилам linthtml
82-
83-
## Работа с разметкой
84-
Все HTML-файлы с разметкой складывайте в папку `source/`.
85-
86-
```bash
100+
101+
- `npm run optimizeImages` - создаёт оптимизированные изображения в `source/images/`
102+
- `npm run preview` - позволяет посмотреть результат работы prod-версии сборки
103+
- `npm run lint` - запускает все проверки (занимает длительное время)
104+
- `npm run lint:bem` - проверяет правильное использование БЭМ в разметке
105+
- `npm run lint:markup` - проверяет HTML-разметку через W3C-валидатор
106+
- `npm run lint:styles` - проверяет проект на совместимость с stylelint
107+
- `npm run lint:spaces` - проверяет отступы с помощью editorConfig
108+
- `npm run lint:html` - проверяет разметку по правилам linthtml
109+
- `npm run lint:js` - проверяет скрипты по правилам eslint
110+
111+
## Работа с разметкой
112+
113+
Все HTML-файлы с разметкой складывайте в папку `source/`.
114+
115+
```shell
87116
├── source/
88117
│ ├── index.html
89118
│ ├── catalog.html
90119
│ └── form.html
91120
```
92121

93-
из папки `source/` сборка переносит файлы в папку `build/`.
122+
Из папки `source/` сборка переносит файлы в папку `build/`.
94123

95-
```bash
124+
```shell
96125
├── build/
97126
│ ├── index.html
98127
│ ├── catalog.html
99128
│ └── form.html
100129
```
101130

102-
## Работа со стилями
103-
Все стили находятся в папке `source/sass/`.
131+
## Работа со стилями
104132

105-
```bash
133+
Все стили находятся в папке `source/sass/`.
134+
135+
```shell
106136
├── source/
107137
│ ├── sass
108138
│ │ └── blocks/
@@ -113,9 +143,8 @@ v18.18.0
113143
│ │ └── variables.scss
114144
```
115145

116-
Все БЭМ-блоки и остальные препроцессорные файлы подключайте в `source/sass/styles.scss`.
146+
Все БЭМ-блоки и остальные препроцессорные файлы подключайте в `source/sass/styles.scss`.
117147

118-
_styles.scss_
119148
```scss
120149
/* GLOBAL */
121150
@import "global/variables";
@@ -126,48 +155,52 @@ _styles.scss_
126155
@import "blocks/header";
127156
```
128157

129-
БЭМ-блоки импортируйте в секцию `/* BLOCKS */`.
158+
БЭМ-блоки импортируйте в секцию `/* BLOCKS */`.
130159

131160
Все препроцессорные файлы сборка обработает и превратит в `styles.css`. Файл `styles.css` сборка перенесёт в
132161

133-
```bash
162+
```shell
134163
├── build/
135164
│ └── css/
136165
│ └── styles.css
137166
```
138167

139-
## Работа с графикой
140-
Абсолютно всю растровую графику с двухкратной плотностью из макета складывайте в `source/.raw`. Здесь графика игнорируется гитом.
141-
После того как добавите графику сразу запускайте команду `npm run optimizeImages` для оптимизации графики и создания `.webp`-версии. Команду нужно запускать один раз при появлении новой графики в проекте.
142-
Новая оптимизированная графика разной плотностью и суффиксами плотности в именах файлов появится в `source/images`. Эту, уже оптимизированную графику нужно коммитить.
168+
## Работа с графикой
169+
170+
Абсолютно всю растровую графику с двухкратной плотностью из макета складывайте в `source/.raw`. Здесь графика игнорируется гитом.
143171

144-
Векторную графику для спрайта складывайте в `source/images/icons/`. Автоматизация создаст из иконок файл `stack.svg`.
172+
После того как добавите графику сразу запускайте команду `npm run optimizeImages` для оптимизации графики и создания `.webp`-версии. Команду нужно запускать один раз при появлении новой графики в проекте.
145173

146-
```bash
174+
Новая оптимизированная графика разной плотностью и суффиксами плотности в именах файлов появится в `source/images`. Эту, уже оптимизированную графику нужно коммитить.
175+
176+
Векторную графику для спрайта складывайте в `source/images/icons/`. Автоматизация создаст из иконок файл `stack.svg`.
177+
178+
```shell
147179
├── source/
148180
│ ├── .raw/
149181
│ ├── images/
150182
│ │ └── icons/
151183
```
152184

153-
Всю графику автоматизация перенесёт в `build/images/`.
185+
Всю графику автоматизация перенесёт в `build/images/`.
154186

155-
```bash
187+
```shell
156188
├── build/
157189
│ └── images/
158-
│ └── icons # папка для спрайта
159-
│ └── stack.svg # спрайт
190+
│ └── icons # папка для спрайта
191+
│ └── stack.svg # спрайт
160192
│ ├── bg.jpg
161193
│ ├── bg.webp
162194
│ ├── hero.png
163195
│ ├── hero.webp
164196
│ └── burger.svg
165197
```
166198

167-
## Работа со шрифтами
168-
Все шрифтовые файлы лежат в `source/fonts/`. Сборка переносит их в `build/fonts/`.
199+
## Работа со шрифтами
200+
201+
Все шрифтовые файлы лежат в `source/fonts/`. Сборка переносит их в `build/fonts/`.
169202

170-
```bash
203+
```shell
171204
├── build/
172205
│ └── fonts/
173206
│ ├── open-sans.woff2
@@ -176,54 +209,60 @@ _styles.scss_
176209
│ └── open-sans-bold.woff
177210
178211
```
179-
## Работа со скриптами
180-
Все скрипты лежат в `source/script/`.
181212

182-
```bash
213+
## Работа со скриптами
214+
215+
Все скрипты лежат в `source/script/`.
216+
217+
```shell
183218
├── source/
184219
│ ├── js
185220
│ │ ├── script.js
186221
│ │ └── modal.js
187222
```
188223

189-
Сборка переносит их в `build/script/`.
190-
```bash
224+
Сборка переносит их в `build/script/`.
225+
226+
```shell
191227
├── build/
192228
│ ├── js
193229
│ │ ├── script.js
194230
│ │ └── modal.js
195231
```
196232

197-
## Работа со сторонними библиотеками
198-
Для удобства внесения сторонних библиотек в ваш проект, вы можете использовать папку vendor. В этой папке вы можете размещать любые файлы, связанные с внешними библиотеками.
233+
## Работа со сторонними библиотеками
234+
235+
Для удобства внесения сторонних библиотек в ваш проект, вы можете использовать папку `source/vendor/`. В этой папке вы можете размещать любые файлы, связанные с внешними библиотеками.
199236

200-
Например, предположим, что вы хотите добавить в проект библиотеку, которая включает в себя как стилевой файл library.css, так и скрипты library.js. Чтобы интегрировать их в ваш проект, следуйте этим шагам:
237+
Например, предположим, что вы хотите добавить в проект библиотеку, которая включает в себя как стилевой файл `library.css`, так и скрипты `library.js`. Чтобы интегрировать их в ваш проект, следуйте этим шагам:
201238

202-
Положите файлы библиотеки в папку vendor, как показано ниже:
239+
Положите файлы библиотеки в папку `source/vendor/`, как показано ниже:
203240

204-
```bash
241+
```shell
205242
├── source/
206243
│ └── vendor/
207244
│ ├── library.css
208245
│ └── library.js
209246
```
210247

211-
Если у вас есть несколько библиотек с разными файлами, вы можете группировать файлы одной библиотеки в ее собственную подпапку. Например:
212-
```bash
248+
Если у вас есть несколько библиотек с разными файлами, вы можете группировать файлы одной библиотеки в ее собственную подпапку. Например:
249+
250+
```shell
213251
├── source/
214252
│ └── vendor/
215253
│ └── library/
216254
│ ├── library.css
217255
│ └── library.js
218256
```
219257

220-
При сборке вашего проекта, все файлы из папки vendor будут включены в папку build, сохраняя их структуру. Например:
221-
```bash
258+
При сборке вашего проекта, все файлы из папки `source/vendor/` будут включены в папку `build/vendor/`, сохраняя их структуру. Например:
259+
260+
```shell
222261
├── build/
223262
│ └── vendor/
224263
│ └── library/
225264
│ ├── library.css
226265
│ └── library.js
227266
```
228267

229-
Таким образом, вы можете удобно организовать и внедрить сторонние библиотеки в ваш проект, сохраняя их структуру в папке vendor.
268+
Таким образом, вы можете удобно организовать и внедрить сторонние библиотеки в ваш проект, сохраняя их структуру в папке `source/vendor/`.

0 commit comments

Comments
 (0)