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

.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

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
+  )
+)