Does my gulpfile need the gulp-css-rebase plugin?

Question

gulp.js

Build a website with gulp. But svg pictures are not displayed on the LOCAL computer (everything is perfectly displayed on the server). I was told that the svg is not displayed because the paths are incorrect (although I don’t see what the paths are wrong, - in my opinion, I wrote all the paths correctly). Advised to use gulp-css-rebase plugin. I couldn't find a detailed description of it on the internet. It's not clear to me - is this plugin really needed if I have already written all the paths in gulpfile ? And if needed, then in each task you need to add this plugin? And where should I put it so as not to break my gulpfile ?

Website Link:

My gulpfile:

/* пути к исходным файлам (src), к готовым файлам (build), а также к тем, за изменениями которых нужно наблюдать (watch) */
var path = {
    build: {
        html: 'build/',
        js: 'build/js/',
        lib: 'build/js/lib/',
        css: 'build/css/',
        img: 'build/img/',
        fonts: 'build/fonts/',
        video: 'build/video/'     
    },
    src: {
        html: 'src/*.html',
        js: 'src/js/main.js',  
        lib: 'src/js/lib/**/*.js',     
        style: 'src/style/style.less',
        img: 'src/img/**/*.*',
        webp: 'src/img/**/*.{png,jpg}',
        fonts: 'src/fonts/**/*.*',
        sprite: 'src/img/**/*.svg',
        video: 'src/video/*.*'       
    },
    watch: {
        html: 'src/**/*.html',
        js: 'src/js/**/*.js',
        css: 'src/style/**/*.less',
        img: 'src/img/**/*.*',
        webp: 'src/img/**/*.{png,jpg}',
        fonts: 'srs/fonts/**/*.*',
        sprite: 'src/img/**/*.svg',
        video: 'src/video/*.*'
    },
    clean: './build/*'
};

/* настройки сервера */
var config = {
    server: {
        baseDir: './build'      
    },
    notify: false
};

/* подключаем gulp и плагины */
var gulp = require('gulp'),  // подключаем Gulp
    webserver = require('browser-sync'), // сервер для работы и автоматического обновления страниц
    plumber = require('gulp-plumber'), // модуль для отслеживания ошибок
    rigger = require('gulp-rigger'), // модуль для импорта содержимого одного файла в другой
    sourcemaps = require('gulp-sourcemaps'), // модуль для генерации карты исходных файлов
    less = require('gulp-less'), // модуль для компиляции Less в CSS
    autoprefixer = require('gulp-autoprefixer'), // модуль для автоматической установки автопрефиксов
    cleanCSS = require('gulp-clean-css'), // плагин для минимизации CSS
    uglify = require('gulp-uglify'), // модуль для минимизации JavaScript
    cache = require('gulp-cache'), // модуль для кэширования
    imagemin = require('gulp-imagemin'), // плагин для сжатия PNG, JPEG, GIF и SVG изображений
    // jpegrecompress = require('imagemin-jpeg-recompress'), // плагин для сжатия jpeg
    // pngquant = require('imagemin-pngquant'), // плагин для сжатия png
    del = require('del'), // плагин для удаления файлов и каталогов
    rename = require('gulp-rename');
    svgstore = require("gulp-svgstore");
    webp = require("gulp-webp");

/* задачи */

// запуск сервера
gulp.task('webserver', function () {
    webserver(config);
});

// сбор html
gulp.task('html:build', function () {
    return gulp.src(path.src.html) // выбор всех html файлов по указанному пути
        .pipe(plumber()) // отслеживание ошибок
        .pipe(rigger()) // импорт вложений
        .pipe(gulp.dest(path.build.html)) // выкладывание готовых файлов
        .pipe(webserver.reload({ stream: true })); // перезагрузка сервера
});

// сбор стилей
gulp.task('css:build', function () {
    return gulp.src(path.src.style) // получим main.scss
        .pipe(plumber()) // для отслеживания ошибок
        .pipe(sourcemaps.init()) // инициализируем sourcemap
        .pipe(less()) // less -> css
        .pipe(autoprefixer()) // добавим префиксы
        .pipe(gulp.dest(path.build.css))
        .pipe(rename({ suffix: '.min' }))
        .pipe(cleanCSS()) // минимизируем CSS
        .pipe(sourcemaps.write('./')) // записываем sourcemap
        .pipe(gulp.dest(path.build.css)) // выгружаем в build
        .pipe(webserver.reload({ stream: true })); // перезагрузим сервер
});

// сбор js
gulp.task('js:build', function () {
    return gulp.src(path.src.js) // получим файл main.js    
        .pipe(plumber()) // для отслеживания ошибок
        .pipe(rigger()) // импортируем все указанные файлы в main.js
        .pipe(gulp.dest(path.build.js))
        .pipe(rename({ suffix: '.min' }))
        .pipe(sourcemaps.init()) //инициализируем sourcemap
        .pipe(uglify()) // минимизируем js
        .pipe(sourcemaps.write('./')) //  записываем sourcemap
        .pipe(gulp.dest(path.build.js)) // положим готовый файл
        .pipe(webserver.reload({ stream: true })); // перезагрузим сервер
});

// перенос шрифтов
gulp.task('fonts:build', function () {
    return gulp.src(path.src.fonts)
        .pipe(gulp.dest(path.build.fonts));
});

// перенос библиотеки js
// gulp.task('lib:build', function () {
//   return gulp.src(path.src.lib)
//       .pipe(gulp.dest(path.build.lib));
// });

// обработка картинок
gulp.task('sprite:build', function () {
  return gulp.src(path.src.sprite)
    .pipe(svgstore({
      inlineSvg: true
    }))
    .pipe(rename("sprite.svg"))
    .pipe(gulp.dest(path.build.img))
    .pipe(webserver.reload({ stream: true })); // перезагрузим сервер
});

gulp.task('image:build', function () {
  return gulp.src(path.src.img)
    .pipe(imagemin([
      imagemin.optipng({
        optimizationLevel: 3
      }),
      imagemin.mozjpeg({
        progressive: true
      }),
      imagemin.svgo()
    ]))
    .pipe(gulp.dest(path.build.img))
    .pipe(webserver.reload({ stream: true })); // перезагрузим сервер
});

gulp.task('webp:build', function () {
  return gulp.src(path.src.webp)
    .pipe(webp({
      quality: 90
    }))
    .pipe(gulp.dest(path.build.img));
});

// обработка видео
gulp.task("video:build", function () {
    return gulp.src(path.src.video)
        .pipe(gulp.dest(path.build.video))
        // .pipe(reload({stream:true}))
        .pipe(webserver.reload({ stream: true })); // перезагрузим сервер
});

// удаление каталога build
gulp.task('clean:build', function () {
    return del(path.clean);
});

// очистка кэша
gulp.task('cache:clear', function () {
  return cache.clearAll();
});

// сборка
gulp.task('build',
    gulp.series('clean:build',
        gulp.parallel(
            'html:build',
            'css:build',
            'js:build',
            // 'lib:build',
            'fonts:build',
            // 'favicon:build',
            'image:build',
            'sprite:build',
            'webp:build',
            'video:build'
        )
    )
);

// запуск задач при изменении файлов
gulp.task('watch', function () {
    gulp.watch(path.watch.html, gulp.series('html:build'));
    gulp.watch(path.watch.css, gulp.series('css:build'));
    gulp.watch(path.watch.js, gulp.series('js:build'));
    gulp.watch(path.watch.sprite, gulp.series('sprite:build'));
    gulp.watch(path.watch.img, gulp.series('image:build'));
    gulp.watch(path.watch.webp, gulp.series('webp:build'));
    gulp.watch(path.watch.fonts, gulp.series('fonts:build'));
    gulp.watch(path.watch.video, gulp.series('video:build'));
});

// задача по умолчанию
gulp.task('default', gulp.series(
    'build',
    gulp.parallel('webserver','watch')
));

Answer 1

From the looks of it, you're all right with the paths. I can't tell for sure from my phone.
The problem with paths happens when you have nesting in src in your styles folder. For example, scss/components/**.*
Let's say that the path to your images will be ../../images/dest/
When building the project, you will get one app.min.css file, now the path to the images will become shorter:
../images /dest/
To solve these problems, there are plugins such as rebase or https://www.npmjs.com/package/gulp-css-url-adjuster
I used the second one.