You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Для работы с репозиторием на вашем компьютере потребуется 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
-
```
14
6
15
-
7
+
Для работы с репозиторием на вашем компьютере потребуется _Git_ и _Node.js_. Перед началом работы убедитесь, что все программы работают. Для этого в терминале введите:
16
8
17
-
версия не важна. Главное, что git отреагировал и написал ответ
9
+
- для _Git_
18
10
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
+
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
+
38
+
39
+
важно, чтобы была действующая LTS версия (первое число — чётное), то есть не ниже 20.9 или не ниже 18.18.
└── package.json # Зависимости проекта, скрипты, настройки проекта
65
90
└── package-lock.json # Зависимости проекта
66
91
└── README.md # Документация
67
92
```
68
93
69
94
## Основные команды
70
-
-`npm start` - запускает сборку с сервером для разработки проекта
71
-
-`npm run build` - создаёт папку `build` с оптимизированными файлами для продакшена
95
+
96
+
- `npm start` - запускает сборку с сервером для разработки проекта
97
+
- `npm run build` - создаёт папку `build` с оптимизированными файлами для продакшена
72
98
73
99
## Дополнительные команды
74
-
-`npm run preview` - посмотреть результат работы prod-версии сборки
75
-
-`npm run lint` - запустить все проверки. Занимает длительное время
76
-
-`npm run lint:bem` - проверить правильно использования БЭМ
77
-
-`npm run lint:markup` - проверить HTML-разметку через W3C-валидатор
78
-
-`npm run lint:styles` - проверить проект на совместимость с stylelint
79
-
-`npm run lint:spaces` - проверить отступы с помощью editorConfig
80
-
-`npm run lint:html` - проверить разметку по правилам linthtml
81
-
82
-
## Работа с разметкой
83
-
Все HTML-файлы с разметкой складывайте в папку `source/`.
84
-
85
-
```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
86
116
├── source/
87
117
│ ├── index.html
88
118
│ ├── catalog.html
89
119
│ └── form.html
90
120
```
91
121
92
-
из папки `source/` сборка переносит файлы впапку `build/`.
122
+
Из папки `source/` сборка переносит файлы впапку `build/`.
93
123
94
-
```bash
124
+
```shell
95
125
├── build/
96
126
│ ├── index.html
97
127
│ ├── catalog.html
98
128
│ └── form.html
99
129
```
100
130
101
-
## Работа со стилями
102
-
Все стили находятся в папке `source/sass/`.
131
+
## Работа со стилями
103
132
104
-
```bash
133
+
Все стили находятся в папке `source/sass/`.
134
+
135
+
```shell
105
136
├── source/
106
137
│ ├── sass
107
138
│ │ └── blocks/
@@ -112,9 +143,8 @@ v18.18.0
112
143
│ │ └── variables.scss
113
144
```
114
145
115
-
Все БЭМ-блоки иостальные препроцессорные файлы подключайте в`source/sass/styles.scss`.
146
+
Все БЭМ-блоки иостальные препроцессорные файлы подключайте в`source/sass/styles.scss`.
116
147
117
-
_styles.scss_
118
148
```scss
119
149
/* GLOBAL */
120
150
@import "global/variables";
@@ -125,43 +155,52 @@ _styles.scss_
125
155
@import "blocks/header";
126
156
```
127
157
128
-
БЭМ-блоки импортируйте всекцию `/* BLOCKS */`.
158
+
БЭМ-блоки импортируйте всекцию `/* BLOCKS */`.
129
159
130
160
Все препроцессорные файлы сборка обработает и превратит в `styles.css`. Файл `styles.css` сборка перенесёт в
131
161
132
-
```bash
162
+
```shell
133
163
├── build/
134
164
│ └── css/
135
165
│ └── styles.css
136
166
```
137
167
138
-
## Работа с графикой
139
-
Абсолютно всю графику складывайте в `source/images`.
168
+
## Работа с графикой
169
+
170
+
Абсолютно всю растровую графику с двухкратной плотностью из макета складывайте в `source/.raw`. Здесь графика игнорируется гитом.
140
171
141
-
Векторную графику для спрайта складывайте в `source/images/icons/`. Автоматизация создаст из иконок файл `stack.svg`.
172
+
После того как добавите графику сразу запускайте команду `npm run optimizeImages` для оптимизации графики и создания `.webp`-версии. Команду нужно запускать один раз при появлении новой графики в проекте.
142
173
143
-
```bash
174
+
Новая оптимизированная графика разной плотностью и суффиксами плотности в именах файлов появится в `source/images`. Эту, уже оптимизированную графику нужно коммитить.
175
+
176
+
Векторную графику для спрайта складывайте в `source/images/icons/`. Автоматизация создаст из иконок файл `stack.svg`.
177
+
178
+
```shell
144
179
├── source/
180
+
│ ├── .raw/
145
181
│ ├── images/
146
182
│ │ └── icons/
147
183
```
148
184
149
-
Всю графику автоматизация перенесёт в`build/images/`.
185
+
Всю графику автоматизация перенесёт в`build/images/`.
150
186
151
-
```bash
187
+
```shell
152
188
├── build/
153
189
│ └── images/
154
-
│ └── icons # папка дляспрайта
155
-
│ └── stack.svg # спрайт
190
+
│ └── icons # папка дляспрайта
191
+
│ └── stack.svg # спрайт
156
192
│ ├── bg.jpg
193
+
│ ├── bg.webp
157
194
│ ├── hero.png
195
+
│ ├── hero.webp
158
196
│ └── burger.svg
159
197
```
160
198
161
-
## Работа со шрифтами
162
-
Все шрифтовые файлы лежат в `source/fonts/`. Сборка переносит их в `build/fonts/`.
199
+
## Работа со шрифтами
200
+
201
+
Все шрифтовые файлы лежат в `source/fonts/`. Сборка переносит их в `build/fonts/`.
163
202
164
-
```bash
203
+
```shell
165
204
├── build/
166
205
│ └── fonts/
167
206
│ ├── open-sans.woff2
@@ -170,54 +209,60 @@ _styles.scss_
170
209
│ └── open-sans-bold.woff
171
210
172
211
```
173
-
## Работа со скриптами
174
-
Все скрипты лежат в `source/script/`.
175
212
176
-
```bash
213
+
## Работа со скриптами
214
+
215
+
Все скрипты лежат в `source/script/`.
216
+
217
+
```shell
177
218
├── source/
178
219
│ ├── js
179
220
│ │ ├── script.js
180
221
│ │ └── modal.js
181
222
```
182
223
183
-
Сборка переносит их в `build/script/`.
184
-
```bash
224
+
Сборка переносит их в `build/script/`.
225
+
226
+
```shell
185
227
├── build/
186
228
│ ├── js
187
229
│ │ ├── script.js
188
230
│ │ └── modal.js
189
231
```
190
232
191
-
## Работа со сторонними библиотеками
192
-
Для удобства внесения сторонних библиотек в ваш проект, вы можете использовать папку vendor. В этой папке вы можете размещать любые файлы, связанные с внешними библиотеками.
233
+
## Работа со сторонними библиотеками
234
+
235
+
Для удобства внесения сторонних библиотек в ваш проект, вы можете использовать папку `source/vendor/`. В этой папке вы можете размещать любые файлы, связанные с внешними библиотеками.
193
236
194
-
Например, предположим, что вы хотите добавить впроект библиотеку, которая включает всебя как стилевой файл library.css, так искрипты library.js. Чтобы интегрировать их вваш проект, следуйте этим шагам:
237
+
Например, предположим, что вы хотите добавить впроект библиотеку, которая включает всебя как стилевой файл `library.css`, так искрипты `library.js`. Чтобы интегрировать их вваш проект, следуйте этим шагам:
195
238
196
-
Положите файлы библиотеки впапку vendor, как показано ниже:
239
+
Положите файлы библиотеки впапку `source/vendor/`, как показано ниже:
197
240
198
-
```bash
241
+
```shell
199
242
├── source/
200
243
│ └── vendor/
201
244
│ ├── library.css
202
245
│ └── library.js
203
246
```
204
247
205
-
Если у вас есть несколько библиотек с разными файлами, вы можете группировать файлы одной библиотеки в ее собственную подпапку. Например:
206
-
```bash
248
+
Если у вас есть несколько библиотек с разными файлами, вы можете группировать файлы одной библиотеки в ее собственную подпапку. Например:
249
+
250
+
```shell
207
251
├── source/
208
252
│ └── vendor/
209
253
│ └── library/
210
254
│ ├── library.css
211
255
│ └── library.js
212
256
```
213
257
214
-
При сборке вашего проекта, все файлы из папки vendor будут включены в папку build, сохраняя их структуру. Например:
215
-
```bash
258
+
При сборке вашего проекта, все файлы из папки `source/vendor/` будут включены в папку `build/vendor/`, сохраняя их структуру. Например:
259
+
260
+
```shell
216
261
├── build/
217
262
│ └── vendor/
218
263
│ └── library/
219
264
│ ├── library.css
220
265
│ └── library.js
221
266
```
222
267
223
-
Таким образом, вы можете удобно организовать ивнедрить сторонние библиотеки вваш проект, сохраняя их структуру впапке vendor.
268
+
Таким образом, вы можете удобно организовать ивнедрить сторонние библиотеки вваш проект, сохраняя их структуру впапке `source/vendor/`.
0 commit comments