Верстка Креативного NFT Лендинга HTML, Sass | Scss, JS, Gulp. Работа с svg

Изучаю Фронтенд простыми словами, а именно 2-й урок. Скачал с

введите сюда описание изображения

готовую верстку второго урока, а именно с https://github.com/web-dev404/NFT-Landing архив с папкой NFT-Landing-main.zip. Разархивировал архив в папку D:\OSPanel\domains\NFT-Landing-main и переименовал её в папку nftland

введите сюда описание изображения

Открыл ее в VSCode

введите сюда описание изображения

и заметил, что в папке dist (созданной с помощью gulp) нет файла img/icons/icons.svg#arrow-down. В src есть файлы

введите сюда описание изображения

arrow-down.svg и другие, но они не преобразовались в папку dist/img/icons.

Пытался запустить

npm run svgSprive

но в папке dist не была создана папка img/icons с нужными файлами. Как создать svg файлы в нужной папке (в папке dist)? Из за того, что файлы не преобразовались по нужному пути в папке dist, svg картинки на сайте не отображаются.

Привожу код файла svgSprive.js

import svgSprite from "gulp-svg-sprite";

export const svgSprive = () => {
    return app.gulp.src(`${app.path.src.svgicons}`, {})
    .pipe(app.plugins.plumber(
        app.plugins.notify.onError({
            title: "SVG",
            message: "Error: <%= error.message %>"
        })
    ))
    .pipe(svgSprite({
        mode: {
            stack: {
                sprite: `../icons/icons.svg`,
                example: true
            }
        }
    }))
    .pipe(app.gulp.dest(`${app.path.build.images}`));
}  

Аккуратно следовал инструкциям в статье по созданию слайдера. Но, в папке dist не была создана папка img/icons с нужными файлами.

Как создать svg файлы в нужной папке (в папке dist)?


Ответы (1 шт):

Автор решения: vlad dv

Я вызывал команды npm run svgSprive, npm run dev не в том порядке. Необходимо было вызывать сначала npm run dev, а затем npm run svgSprive, потому что в противном случае npm run dev перезаписывало бы папку dist\img\icons, созданную npm run svgSprive.

→ Ссылка