Как в gulp менять относительные пути?

Во время работы с Gulp.js есть случаи, когда необходимо изменять относительные пути. Это может быть полезно, например, для изменения путей к файлам в HTML-файлах или для переноса файлов в другие каталоги внутри проекта. Существует несколько способов изменить относительные пути в Gulp.js.

1.Использование модуля 'gulp-replace-path':

const replace = require('gulp-replace-path');

gulp.task('replace', () => {
  return gulp.src('src/index.html')
    .pipe(replace('/images/', '/new/images/'))
    .pipe(gulp.dest('dist'));
});

Этот код заменит все вхождения '/images/' на '/new/images/' в HTML-файле 'src/index.html' и поместит его в директорию 'dist'.

2.Использование модуля 'gulp-rename':

const rename = require('gulp-rename');

gulp.task('rename', () => {
  return gulp.src('src/css/styles.css')
    .pipe(rename({ dirname: 'new/css' }))
    .pipe(gulp.dest('dist'));
});

Этот код переместит файл 'src/css/styles.css' в папку 'dist/new/css' с сохранением структуры и имени файла.

3.Использование модуля 'gulp-flatten':

const flatten = require('gulp-flatten');

gulp.task('flatten', () => {
  return gulp.src('src/**/*.{png,jpg}')
    .pipe(flatten())
    .pipe(gulp.dest('dist/images'));
});

Этот код скопирует все файлы с расширениями .png и .jpg из директории 'src' в директорию 'dist/images', удалив путь после имени файла.

4.Использование модуля 'gulp-rebase':

const rebase = require('gulp-rebase');

gulp.task('rebase', () => {
  return gulp.src('src/**/*.html')
    .pipe(rebase({ root: 'src', newPath: 'new/path' }))
    .pipe(gulp.dest('dist'));
});

Этот код изменит относительные пути во всех HTML-файлах, начинающихся с 'src/', заменив 'src' на 'new/path', и поместит их в директорию 'dist'.

Все эти модули могут быть установлены с помощью менеджера пакетов npm. Чтобы установить любой из них, выполните команду:

npm install gulp-replace-path gulp-rename gulp-flatten gulp-rebase --save-dev

Каждый из этих способов позволяет гибко изменять относительные пути в Gulp.js в соответствии с вашими потребностями. Выберите наиболее подходящий для вашего проекта и его задач.