Улучшение скорости загрузки

.editorconfig

@@ -1,13 +1,3 @@
-# Файл с настройками для редактора.
-#
-# Если вы разрабатываете в редакторе WebStorm, BBEdit, Coda или SourceLair
-# этот файл уже поддерживается и не нужно производить никаких дополнительных
-# действий.
-#
-# Если вы ведёте разработку в другом редакторе, зайдите
-# на https://editorconfig.org и в разделе «Download a Plugin»
-# скачайте дополнение для вашего редактора.
-
 root = true
 
 [*]

.gitignore

@@ -1,3 +1,5 @@
+build/
+.npm
 .DS_Store
 .idea
 .vscode

Readme.md

@@ -1,58 +1,43 @@
-# Личный проект «Седона» 
+# Личный проект «Седона»
 
-* Студент: [Данила  Родионов](https://up.htmlacademy.ru/univer-html2/1/user/2431069).
-* Наставник: `Неизвестно`.
+* Студент: [Родионов Данила](https://github.com/Sveta190204).
+* Наставник: [Алексей Владимирович Самохвалов](https://github.com/avsamohvalov).
 
 ---
 
-**Обратите внимание, что папка с вашими исходными файлами — `source/`.**
-
-Полезный файл:
-
-- [Contributing.md](Contributing.md) — руководство по внесению изменений.
-
-_Не удаляйте и не обращайте внимание на файлы:_<br>
-_`.editorconfig`, `.gitattributes`, `.gitignore`, `.stylelintrc`, `.travis.yml`, `package-lock.json`, `package.json`._
+_Не удаляйте и не обращайте внимание на файлы:_<br>
+_`.editorconfig`, `.gitattributes`, `.gitignore`, `Contributing.md`, `Readme.md`._
 
 ---
 
 ### Памятка
 
 #### 1. Зарегистрируйтесь на Гитхабе
 
-Если у вас ещё нет аккаунта на [github.com](https://github.com/join), скорее зарегистрируйтесь.
+Если у вас ещё нет аккаунта на [github.com](https://github.com/join), скорее зарегистрируйтесь.
 
 #### 2. Создайте форк
 
-[Откройте мастер-репозиторий](https://github.com/htmlacademy-univer-htmlcss-2/2431069-sedona-1) и нажмите кнопку «Fork» в правом верхнем углу. Репозиторий из Академии будет скопирован в ваш аккаунт.
+[Откройте мастер-репозиторий](https://github.com/htmlacademy-htmlcss/775445-sedona-35) и нажмите кнопку «Fork» в правом верхнем углу. Репозиторий из Академии скопируется в ваш аккаунт.
 
-<img width="800" alt="" src="https://user-images.githubusercontent.com/10909/60807979-e1129f00-a18f-11e9-90d7-b44d2ff2c003.jpg">
+<img width="769" alt="" src="https://user-images.githubusercontent.com/10909/29037949-67a635d6-7bae-11e7-9f2f-1a48fde231b9.jpg">
 
 Получится вот так:
 
-<img width="800" alt="" src="https://user-images.githubusercontent.com/10909/60807980-e1129f00-a18f-11e9-8137-45876f130340.jpg">
+<img width="769" alt="" src="https://user-images.githubusercontent.com/10909/29037953-6a8a7384-7bae-11e7-83ac-59603b1d696c.jpg">
 
 #### 3. Клонируйте репозиторий на свой компьютер
 
-Будьте внимательны: нужно клонировать свой репозиторий (форк), а не репозиторий Академии. Также обратите внимание, что клонировать репозиторий нужно через SSH, а не через HTTPS. Нажмите зелёную кнопку в правой части экрана, чтобы скопировать SSH-адрес вашего репозитория:
+Будьте внимательны: нужно клонировать свой репозиторий (форк), а не репозиторий Академии. Нажмите кнопку «Clone or download», а затем «Open in Desktop», чтобы клонировать репозиторий через программу [GitHub Desktop](https://desktop.github.com):
 
-<img width="800" alt="" src="https://user-images.githubusercontent.com/10909/60807982-e1129f00-a18f-11e9-98c4-0d3bf4b85cf1.jpg">
+<img width="769" alt="" src="https://user-images.githubusercontent.com/10909/29037955-6c20c16c-7bae-11e7-9e1a-c52010042976.jpg">
 
-Клонировать репозиторий можно так:
-
-```
-git clone SSH-адрес_вашего_форка
-```
-
-Команда клонирует репозиторий на ваш компьютер и подготовит всё необходимое для старта работы.
+Программа клонирует репозиторий на ваш компьютер и подготовит всё необходимое для старта работы.
 
 #### 4. Начинайте обучение!
 
 ---
 
-<a href="https://htmlacademy.ru/intensive/adaptive"><img align="left" width="50" height="50" alt="HTML Academy" src="https://up.htmlacademy.ru/static/img/intensive/adaptive/logo-for-github-2.png"></a>
-
-Репозиторий создан для обучения на профессиональном онлайн‑курсе «[HTML и CSS. Адаптивная вёрстка и автоматизация](https://htmlacademy.ru/intensive/adaptive)» от [HTML Academy](https://htmlacademy.ru).
+<a href="https://htmlacademy.ru/intensive/htmlcss"><img align="left" width="50" height="50" alt="HTML Academy" src="https://up.htmlacademy.ru/static/img/intensive/htmlcss/logo-for-github-2.png"></a>
 
-[check-image]: https://github.com/htmlacademy-adaptive/2431069-sedona-1/workflows/Project%20check/badge.svg?branch=master
-[check-url]: https://github.com/htmlacademy-adaptive/2431069-sedona-1/actions
+Репозиторий создан для обучения на профессиональном онлайн‑курсе «[HTML и CSS. Профессиональная вёрстка сайтов](https://htmlacademy.ru/intensive/htmlcss)» от [HTML Academy](https://htmlacademy.ru).

gulpfile.js

@@ -0,0 +1,156 @@
+import gulp from 'gulp'
+import plumber from 'gulp-plumber'
+import less from 'gulp-less'
+import postcss from 'gulp-postcss'
+import autoprefixer from 'autoprefixer'
+import csso from 'postcss-csso'
+import rename from 'gulp-rename'
+import browser from 'browser-sync'
+import htmlmin from 'gulp-htmlmin'
+import terser from 'gulp-terser'
+import squoosh from 'gulp-libsquoosh'
+import svgo from 'gulp-svgmin'
+import svgstore from 'gulp-svgstore'
+import del from 'del'
+
+// Styles
+export const styles = () => { // Название задачи для дальнейшего обращения к ней.
+  return gulp.src('source/less/style.less', { sourcemaps: true }) // Нахождение необходимых файлов, над которыми будет производиться работа.
+    .pipe(plumber()) //  Здесь происходит непосредственно сама работа. В данном случае мы обрабатываем ошибки, затем превращаем Less-файлы в CSS-файлы и в конце добавляем префиксы.
+    .pipe(less())
+    .pipe(postcss([
+      autoprefixer(),
+      csso()
+    ]))
+    .pipe(rename('style.min.css'))
+    .pipe(gulp.dest('build/css', { sourcemaps: '.' })) //  Перенос итогового результата, CSS-файл с префиксами, в необходимую папку `source/css`.
+    .pipe(browser.stream())
+}
+
+// HTML
+const html = () => {
+  return gulp.src('source/*.html')
+  .pipe(htmlmin({collapseWhitespace: true}))
+  .pipe(gulp.dest('build'))
+}
+
+// Scripts
+const scripts = () => {
+  return gulp.src('source/js/*.js')
+    .pipe(terser())
+    .pipe(gulp.dest('build/js'))
+}
+
+// Images
+const optimizeImages = () => {
+  return gulp.src('source/img/**/*.{jpg,png}')
+  .pipe(squoosh())
+  .pipe(gulp.dest('build/img'))
+}
+
+const copyImages = () => {
+  return gulp.src('source/img/**/*.{jpg,png}')
+  .pipe(gulp.dest('build/img'))
+}
+
+// WebP
+const createWebp = () => {
+  return gulp.src('source/img/**/*.{jpg,png}')
+        .pipe(squoosh({
+          webp: {}
+        }))
+        .pipe(gulp.dest('build/img'))
+}
+
+// SVG
+const svg = () =>
+  gulp.src(['source/img/*.svg', '!source/img/icons/*.svg'])
+  .pipe(svgo())
+  .pipe(gulp.dest('build/img'))
+
+const sprite = () => {
+  return gulp.src('source/img/icons/*.svg')
+        .pipe(svgo())
+        .pipe(svgstore({
+          inlineSvg: true
+        }))
+        .pipe(rename('sprite.svg'))
+        .pipe(gulp.dest('build/img'))
+}
+
+// Copy
+const copy = (done) => {
+  gulp.src([
+    'source/fonts/*.{woff2,woff}',
+    'source/*.ico',
+  ], {
+    base: 'source'
+  })
+  .pipe(gulp.dest('build'))
+  done()
+}
+
+// Clean
+const clean = () => {
+  return del('build')
+}
+
+// Server
+const server = (done) => {
+    browser.init({
+        server: {
+            baseDir: 'build'
+        },
+        cors: true,
+        notify: false,
+        ui: false
+    })
+    done()
+}
+
+// Reload
+const reload = (done) => {
+  browser.reload()
+  done()
+}
+
+// Watcher
+const watcher = () => {
+  gulp.watch('source/less/**/*.less', gulp.series(styles))
+  gulp.watch('source/js/*.js', gulp.series(scripts))
+  gulp.watch('source/*.html', gulp.series(html, reload))
+}
+
+// Build
+export const build = gulp.series(
+  clean,
+  copy,
+  optimizeImages,
+  gulp.parallel(
+    styles,
+    html,
+    scripts,
+    svg,
+    sprite,
+    createWebp
+  )
+)
+
+// Default
+export default gulp.series(
+  clean,
+  copy,
+  copyImages,
+  gulp.parallel(
+    styles,
+    html,
+    scripts,
+    svg,
+    sprite,
+    createWebp
+  ),
+  gulp.series(
+    server,
+    watcher
+  )
+)