Replace gulp-svgmin and gulp-sharp-responsive with `@firefoxic/co…

…njure`
htmlacademy · Jun 8, 2024 · e7a924b · e7a924b
1 parent b0ea11c
commit e7a924b
Show file tree

Hide file tree

Showing 10 changed files with 2,169 additions and 5,195 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,8 +2,7 @@ node_modules
 build
 .idea
 .DS_Store
-raw/**/*.jpg
-raw/**/*.jpeg
-raw/**/*.png
-raw/**/*.svg
-!raw/**/README.md
+source/**/*.jpg
+source/**/*.jpeg
+source/**/*.png
+!source/favicons/**/*.png
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Сборка для HTML-курсов в HTML Academy
 
-Сборка работает на gulp 4 версии
+Сборка работает на gulp 5 версии
 
 ## Начало
 
@@ -67,11 +67,8 @@
 │   └── workflows/              # Автоматизация для github actions
 │       ├── check.yml           # Запускает линтеры на Гитхабе
 │       └── gh-pages.yml        # Публикует проект и создаёт ссылку на проект
-├── raw/                        # Папка для «сырых» файлов (игнорируются гитом)
-│   ├── icons/                  # Папка для оригиналов svg-иконок
-│   └── images/                 # Папка для оригиналов картинок
 ├── source/                     # Исходники проекта
-│   ├── favicons/               # Папка для фавиконок (кроме favicon.ico)
+│   ├── favicons/               # Папка для фавиконок (кроме favicon.ico, его в source переложить вручную)
 │   ├── fonts/                  # Папка для шрифтов
 │   ├── icons/                  # Папка для оптимизированных svg-иконок для преобразования их в спрайт (stack)
 │   ├── images/                 # Папка для оптимизированных картинок
@@ -113,9 +110,10 @@
   - `npm run lint:bem` - проверяет правильное использование БЭМ в разметке
   - `npm run lint:styles` - проверяет проект на совместимость с stylelint
   - `npm run lint:scripts` - проверяет скрипты по правилам eslint
-- `npm run optimize` - запускает все оптимизации изображений (занимает длительное время):
-  - `npm run optimize:raster` - оптимизирует растровые изображения из `raw/images/` в `source/images/`
-  - `npm run optimize:vector` - оптимизирует векторные изображения из `raw/images/` в `source/images/`
+- `npm run optimize` - запускает все оптимизации изображений:
+  - `npm run optimize:icons` - в `source/icons/` оптимизирует векторные иконки
+  - `npm run optimize:images` - в `source/images/` оптимизирует векторыне и конвертирует растровые изображения (растровые оригиналы удаляются автоматически)
+  - `npm run optimize:favicons` - в `source/favicons/` генерирует все необходимые варианты фавиконок, а также webmanifest (векторные оригиналы удаляются автоматически)
 
 ## Работа с разметкой
 
@@ -177,38 +175,70 @@
 
 ## Работа с графикой
 
-### Растр
+Во всех трёх ниже описанных случаях коммитить нужно оптимизированную графику.
 
-Абсолютно всю растровую графику с **двухкратной плотностью** из макета складывайте в `raw/images/`. Здесь графика игнорируется гитом.
+### Изображения
 
-После того как добавите графику сразу запускайте команду `npm run optimize:raster` (или просто `npm run optimize`) для оптимизации графики и создания `.webp`-версии. Команду нужно запускать один раз при появлении новой графики в проекте.
+Из макета всю растровую графику (только с **двухкратной плотностью**, но без суффикса плотности `@2x` в имени) и всю контентную векторную графику (логотип, графики, иллюстрации) складывайте в:
 
-Новая оптимизированная графика с разной плотностью и суффиксами плотности в именах файлов появится в `source/images`. Эту, уже оптимизированную графику нужно коммитить.
+```shell
+└── source/
+    └── images/
+```
+
+Здесь растровая графика без суффикса плотности игнорируется гитом.
 
-### Вектор
+Запуск команды `npm run optimize:images` оптимизирует векторную графику и конвертирует растровую в форматы `Webp` и `Avif` для двухкратной и однократной плотности пикселей с соответствующими суффиксами.
+
+### Иконки
 
 Векторную графику для спрайта (иконки) складывайте в:
 
 ```shell
-└── raw/
+└── source/
     └── icons/
 ```
 
-Контентную векторную графику (логотип, графики, иллюстрации) складывайте в:
+Запуск команды `npm run optimize:icons` оптимизирует все иконки.
+
+### Фавиконки
+
+Векторные фавиконки (все, что есть в макете) разместите в:
 
 ```shell
-└── raw/
-    └── images/
+└── source/
+    └── favicons/
 ```
 
-Запуск команды `npm run optimize:vector` поместит оптимизированные копии этих svg-файлов в соответствующие папки в исходниках:
+Имена исходных файлов должны быть такими:
 
 ```shell
 └── source/
-    ├── icons/
-    └── images/
+    └── favicons/
+        ├── 16.svg     # Специальная версия размером 16×16. Добавляй её только при её наличии в макете.
+        ├── 32.svg     # Основной вариант размером 32×32.
+        └── touch.svg  # Большая тач-иконка без скруглений и прозрачностей.
+```
+
+Запуск команды `npm run optimize:favicons` сгенерирует все необходимые фавиконки и вебманифест. Кроме этого сгенерируется файл `Links.md` с кодом нужных тегов `link`. Заберите этот код в `head` разметки (md-файл после этого можно удалить).
+
+Переместите `favicon.ico` и `manifest.webmanifest` в `source/`. Получится так:
+
+```shell
+└── source/
+    ├── favicons/
+    │   ├── icon-180.png
+    │   ├── icon-192.png
+    │   ├── icon-192.webp
+    │   ├── icon-512.png
+    │   ├── icon-512.webp
+    │   └── icon.svg
+    ├── favicon.ico
+    └── manifest.webmanifest
 ```
 
+По необходимости исправь пути в вебманифесте и тегах `link`.
+
 ### Сборка
 
 При продакшен-сборке автоматизация перенесёт всю графику из `source/images/` в `build/images/`, а из иконок в `source/icons/` создаст спрайт `build/icons/stack.svg`.
@@ -227,23 +257,6 @@
         └── logo.svg
 ```
 
-### Фавиконки
-
-Варианты фавиконок форматов PNG и SVG следует размещать в `source/favicons/`.
-
-Файлы `favicon.ico` и `manifest.webmanifest` — в `source/`:
-
-```shell
-└── source/
-    ├── favicons/
-    │   ├── 180.png
-    │   ├── 192.png
-    │   ├── 512.png
-    │   └── icon.svg
-    ├── favicon.ico
-    └── manifest.webmanifest
-```
-
 ## Работа со шрифтами
 
 Все шрифтовые файлы лежат в `source/fonts/`. Сборка переносит их в `build/fonts/`.

diff --git a/gulpfile.js b/gulpfile.js
@@ -1,6 +1,6 @@
 import { readFileSync, rmSync } from 'node:fs';
 
-import gulp from 'gulp';
+import { src, dest, watch, series, parallel } from 'gulp';
 import plumber from 'gulp-plumber';
 import htmlmin from 'gulp-htmlmin';
 import * as dartSass from 'sass';
@@ -10,24 +10,20 @@ import postUrl from 'postcss-url';
 import lightningcss from 'postcss-lightningcss';
 import { createGulpEsbuild } from 'gulp-esbuild';
 import browserslistToEsbuild from 'browserslist-to-esbuild';
-import sharp from 'gulp-sharp-responsive';
-import svgo from 'gulp-svgmin';
 import { stacksvg } from 'gulp-stacksvg';
 import server from 'browser-sync';
 import bemlinter from 'gulp-html-bemlinter';
 
-const { src, dest, watch, series, parallel } = gulp;
 const sass = gulpSass(dartSass);
 const PATH_TO_SOURCE = './source/';
 const PATH_TO_DIST = './build/';
-const PATH_TO_RAW = './raw/';
 const PATHS_TO_STATIC = [
-  `${PATH_TO_SOURCE}fonts/**/*.{woff2,woff}`,
   `${PATH_TO_SOURCE}*.ico`,
   `${PATH_TO_SOURCE}*.webmanifest`,
-  `${PATH_TO_SOURCE}favicons/**/*.{png,svg}`,
+  `${PATH_TO_SOURCE}favicons/**/*.{svg,png,webp}`,
+  `${PATH_TO_SOURCE}fonts/**/*.woff2`,
+  `${PATH_TO_SOURCE}images/**/*{svg,avif,webp}`,
   `${PATH_TO_SOURCE}vendor/**/*`,
-  `${PATH_TO_SOURCE}images/**/*`,
   `!${PATH_TO_SOURCE}**/README.md`,
 ];
 let isDevelopment = true;
@@ -90,48 +86,14 @@ export function processScripts () {
     .pipe(server.stream());
 }
 
-export function optimizeRaster () {
-  const RAW_DENSITY = 2;
-  const TARGET_FORMATS = [undefined, 'webp']; // undefined — initial format: jpg or png
-
-  function createOptionsFormat() {
-    const formats = [];
-
-    for (const format of TARGET_FORMATS) {
-      for (let density = RAW_DENSITY; density > 0; density--) {
-        formats.push(
-          {
-            format,
-            rename: { suffix: `@${density}x` },
-            width: ({ width }) => Math.ceil(width * density / RAW_DENSITY),
-            jpegOptions: { progressive: true },
-          },
-        );
-      }
-    }
-
-    return { formats };
-  }
-
-  return src(`${PATH_TO_RAW}images/**/*.{png,jpg,jpeg}`)
-    .pipe(sharp(createOptionsFormat()))
-    .pipe(dest(`${PATH_TO_SOURCE}images`));
-}
-
-export function optimizeVector () {
-  return src([`${PATH_TO_RAW}**/*.svg`])
-    .pipe(svgo())
-    .pipe(dest(PATH_TO_SOURCE));
-}
-
 export function createStack () {
   return src(`${PATH_TO_SOURCE}icons/**/*.svg`)
     .pipe(stacksvg())
     .pipe(dest(`${PATH_TO_DIST}icons`));
 }
 
 export function copyStatic () {
-  return src(PATHS_TO_STATIC, { base: PATH_TO_SOURCE })
+  return src(PATHS_TO_STATIC, { base: PATH_TO_SOURCE, encoding: false })
     .pipe(dest(PATH_TO_DIST));
 }