Современная cборка Gulp 5 — удаление и копирование — 3 часть

В предыдущей статье (Современная cборка Gulp для веб-разработки — 2 часть) мы продолжили создавать современную сборку Gulp, используя ES-модули и строгий режим. Продолжим её совершенствовать.

Добавляем плагин del

Для очистки папки с результатами (./dist), чтобы в ней не скапливались уже удаленные с исходников и не нужные файлы, установим плагин del. Для этого в терминале наберём:

npm i -D del

В папке gulp/task создадим файл del.mjs

import { deleteAsync } from 'del';

export const del = () => {
  return deleteAsync('dist');
}

Импортируем эту задачу в gulpfile.js добавив строку:

import { del } from './gulp/tasks/del.mjs'; // удаление

и добавим задачу в сценарий:

// Определение сценария задач
const build = gulp.series(del, gulp.parallel(styles, scripts, html), gulp.parallel(serve, watch));

Добавление задачи копирования

Иногда нужно просто перенести файлы и/или папки как есть без изменений в папку с результатом.
Напишем для этого новую задачу.
Папку для этих целей назовём files и расположим в исходниках src/tiles.
Определим новые пути для копирования в файле gulp/config/path.js

...
files: {
  src: './src/files/**/*.*',
  dest: './dist/files'
}
...

В папке gulp/task создаём файл copy.mjs

export const copyFiles = () => {
  return app.gulp.src(app.paths.copy.src, { encoding: false })
    .pipe(app.gulp.dest(app.paths.copy.dest))
}

Импортируем эту задачу в gulpfile.js добавив строку:

import { copyFiles } from './gulp/tasks/copy.mjs'; // копирование

Вставим нашу задачу в сценарий:

// Определение сценария задач
const build = gulp.series(del, copyFiles, gulp.parallel(styles, scripts, html), gulp.parallel(serve, watch));

Давайте будем следить за изменениями в папке srs/files и переносить новые файлы в dist/files прописав новую строку в наблюдателе:

// Отслеживание изменений
function watch() {
  ...
  gulp.watch(paths.copy.src, copyFiles);
}

Теперь добавляя файлы и папки в папку srs/files они буду автоматически переноситься в dist/files

Удаление без перезагрузки

Но сейчас при удалении файла с исходников, он останется в папке dist/files и удалится оттуда, только при перезапуске сборки.

Давайте сделам так, чтобы при удалении файла с исходников, он удалялся и из папки dist/files без перезапуска сборки.

Добавим в файл gulp/task/del.mjs еще одну задачу:

export const delFiles = () => {
  return deleteAsync(app.paths.copy.dest);
}

И в файле gulpfile.js пропишем её в импорте:

import { del, delFiles } from './gulp/tasks/del.mjs'; // удаление

Для удобства создадим переменную с серией задач (т.е. они будут выполнятся друг за другом):

const files = gulp.series(delFiles, copyFiles);

Заменим переменную copyFiles в наблюдателе на files:

// Отслеживание изменений
function watch() {
  ...
    gulp.watch(paths.copy.src, files);
}

Теперь все действия с файлами и папками в папке srs/files буду синхронизированы с папкой dist/files

Заключение

Мы продолжили создавать современную сборку Gulp и рассмотрели котирование и удаление файлов и папок с помощью плагина del.

P.S.

В следующей статье мы продолжим дополнять и совершенствовать эту сборку.

Продолжение следует.