Split raster and vector optimizations

Author: firefoxic

README.md

@@ -105,15 +105,17 @@
 
 ## Дополнительные команды
 
-- `npm run optimizeImages` - создаёт оптимизированные изображения в `source/images/` и `source/icons/`
 - `npm run preview` - позволяет посмотреть результат работы prod-версии сборки
-- `npm run lint` - запускает все проверки (занимает длительное время)
-- `npm run lint:bem` - проверяет правильное использование БЭМ в разметке
-- `npm run lint:markup` - проверяет HTML-разметку через W3C-валидатор
-- `npm run lint:styles` - проверяет проект на совместимость с stylelint
-- `npm run lint:spaces` - проверяет отступы с помощью editorConfig
-- `npm run lint:html` - проверяет разметку по правилам linthtml
-- `npm run lint:scripts` - проверяет скрипты по правилам eslint
+- `npm run lint` - запускает все проверки (занимает длительное время):
+  - `npm run lint:spaces` - проверяет отступы с помощью editorConfig
+  - `npm run lint:markup` - проверяет HTML-разметку через W3C-валидатор
+  - `npm run lint:html` - проверяет разметку по правилам linthtml
+  - `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/`
 
 ## Работа с разметкой
 
@@ -179,13 +181,13 @@
 
 Абсолютно всю растровую графику с двухкратной плотностью из макета складывайте в `raw/images/`. Здесь графика игнорируется гитом.
 
-После того как добавите графику сразу запускайте команду `npm run optimizeImages` для оптимизации графики и создания `.webp`-версии. Команду нужно запускать один раз при появлении новой графики в проекте.
+После того как добавите графику сразу запускайте команду `npm run optimize:raster` (или просто `npm run optimize`) для оптимизации графики и создания `.webp`-версии. Команду нужно запускать один раз при появлении новой графики в проекте.
 
 Новая оптимизированная графика разной плотностью и суффиксами плотности в именах файлов появится в `source/images`. Эту, уже оптимизированную графику нужно коммитить.
 
 ### Вектор
 
-Контентную векторную графику (логотип, графики, иллюстрации) также складывайте в `raw/images/`. Запуск той же команды `npm run optimizeImages` поместит оптимизированные копии этих svg-файлов в `source/images/`
+Контентную векторную графику (логотип, графики, иллюстрации) также складывайте в `raw/images/`. Запуск команды `npm run optimize:vector` (или просто `npm run optimize`) поместит оптимизированные копии этих svg-файлов в `source/images/`
 
 ```shell
 └── raw/
@@ -200,7 +202,7 @@
         └── icons/
 ```
 
-Запуск той же команды `npm run optimizeImages` поместит оптимизированные копии этих svg-файлов в `source/images/icons/`.
+Запуск команды `npm run optimize:vector` поместит оптимизированные копии этих svg-файлов в `source/images/icons/`.
 
 ```shell
 └── source/

gulpfile.js

@@ -112,13 +112,6 @@ export function optimizeVector () {
     .pipe(dest(PATH_TO_SOURCE));
 }
 
-export function optimizeImages (done) {
-  parallel(
-    optimizeVector,
-    optimizeRaster
-  )(done);
-}
-
 export function createStack () {
   return src(`${PATH_TO_SOURCE}images/icons/**/*.svg`)
     .pipe(stacksvg())

package.json

@@ -25,7 +25,9 @@
     "lint:bem": "gulp lintBem --silent",
     "lint:styles": "stylelint \"source/styles/**/*.scss\"",
     "lint:scripts": "eslint . --ignore-path .gitignore",
-    "optimizeImages": "gulp optimizeImages"
+    "optimize": "npm-run-all -p optimize:**",
+    "optimize:raster": "gulp optimizeRaster",
+    "optimize:vector": "gulp optimizeVector"
   },
   "devDependencies": {
     "@htmlacademy/editorconfig-cli": "2.0.8",

raw/images/README.md

@@ -5,13 +5,13 @@
 1. контентные `svg` (не иконки), например логотип.
 2. `png` и `jpg` двойной плотности пикселей.
 
-Для каждого растрового изображения в этой папке запуск команды `npm run optimizeImages` создат в `source/images`:
+Для каждого растрового изображения в этой папке запуск команды `npm run optimize` создат в `source/images`:
 
 - оптимизированную копию с суффиксом `@2x`,
 - оптимизированную уменьшенную в 2 раза копию с суффиксом `@1x`,
 - копию в прогрессивном формате `webp` с суффиксом `@2x`,
 - уменьшенную в 2 раза копию в формате `webp` с суффиксом `@1x`.
 
-Эта же команда создаст оптимизированную копию каждого векторного изображения.
+Эта же команда создаст оптимизированную копию каждого векторного изображения. Или можно запускать отдельно для растра `npm run optimize:raster` и отдельно для вектора `npm run optimize:vector`.
 
 После оптимизации оригиналы можно удалить, чтобы повторный запуск для новых изображений не генерировал заново уже имеющиеся файлы.

raw/images/icons/README.md

@@ -1,3 +1,3 @@
 # Папка для оригиналов иконок
 
-Сюда нужно скидывать неоптимизированные svg-иконки. Для каждой из них запуск команды `npm run optimizeImages` создат в `source/images/icons` оптимизированную копию.
+Сюда нужно скидывать неоптимизированные svg-иконки. Для каждой из них запуск команды `npm run optimize:vector` создат в `source/images/icons` оптимизированную копию.