Как подружить gulp-watch и gulp-svg-sprite?

Чтобы подружить gulp-watch и gulp-svg-sprite, вам понадобится следовать нескольким шагам.

Шаг 1. Установка необходимых модулей
Перед тем, как начать использование gulp-watch и gulp-svg-sprite, у вас должны быть установлены следующие модули:

1. Gulp: вы можете установить gulp глобально, запустив команду npm install -g gulp или локально в вашем проекте, используя команду npm install --save-dev gulp.

2. Gulp-watch: установите gulp-watch, запустив команду npm install --save-dev gulp-watch.

3. Gulp-svg-sprite: установите gulp-svg-sprite, запустив команду npm install --save-dev gulp-svg-sprite.

Шаг 2. Настройка gulpfile.js
Прежде чем настроить gulpfile.js, убедитесь, что у вас есть директория для исходных файлов svg и директория для генерируемых спрайтов SVG.

Создайте файл gulpfile.js (если его еще нет) в корневой папке вашего проекта и добавьте следующий код:

// Подключение модулей
var gulp = require('gulp');
var watch = require('gulp-watch');
var svgSprite = require('gulp-svg-sprite');

// Настройка задачи для генерации спрайта SVG
gulp.task('svg', function () {
   return gulp.src('path/to/svg/files/*.svg') // указываете путь к вашим исходным файлам svg
      .pipe(svgSprite({
         mode: {
            stack: {
               sprite: "../sprite.svg" // указываете путь, по которому будет сгенерирован спрайт svg
            }
         },
      }))
      .pipe(gulp.dest('path/to/destination/folder')); // указываете путь, по которому будет сохранен спрайт svg
});

// Настройка задачи для отслеживания изменений в файлах SVG
gulp.task('watch', function () {
   gulp.watch('path/to/svg/files/*.svg', gulp.series('svg')); // указываете путь к вашим исходным файлам svg
});

В коде выше мы создаем две задачи: одна для генерации спрайта SVG (используя модуль gulp-svg-sprite), а другая для отслеживания изменений в файлах SVG (используя gulp-watch).

Шаг 3. Запуск Gulp
Сохраните файл gulpfile.js и запустите gulp в командной строке. Команда gulp без аргументов выполнит задачу 'svg', генерируя спрайт SVG из ваших исходных файлов SVG. Если вы хотите непрерывно отслеживать изменения в файлах SVG, запустите команду gulp watch - эта команда запустит задачу 'watch', которая будет автоматически пересобирать спрайт при изменении файлов SVG.

В результате у вас будет создан спрайт SVG в указанной вами директории назначения, и изменения в файлах SVG будут автоматически отслеживаться и обновлять спрайт.

Это все, что вам нужно сделать, чтобы подружить gulp-watch и gulp-svg-sprite. Если вы хотите узнать больше о настройке Gulp и использовании этих модулей, вы можете обратиться к их документации.