Assets

Собирает оставшиеся исходные файлы: шрифты, библиотеки и т.п.

Оглавление страницы:

Gulp таск 

За файлы assets отвечает таск ./gulp/tasks/assets.js.

Иерархия файлов 

Файловая структура js выглядит следующим образом:

./src/assets
├── favicons
├── fonts
├── icons
├── images
├── manifest.json
└── robots.txt
  • libs - содержит сторонние библиотеки;
  • fonts - содержит шрифты;
  • icons - содержит svg иконки;
    • mono - svg иконки чернобелые;
    • multi - svg иконки цветные;
  • images - содержит изображения
  • manifest.json - содержит JSON-файл, который описывает иконки и настройки для интеграции веб-приложения в браузер и ОС
  • robots.txt - содержит инструкции для поисковых роботов (краулеров), которые обходят веб-сайты для индексации содержимого.

Каталог libs 

Бывают моменты, когда необходимо обращаться к картинкам, шрифтам и прочим файлам, сторонних библиотек и удобней это делать, если библиотеки находятся в каталоге с исходными файлами.

Чтобы автоматизировать процесс копирования библиотек, была добавлена в таск ./gulp/tasks/assets.js функция, которая копирует в каталог libs, указанные в нем библиотеки из каталога node_modules.

Пример функции:

JS
const componentsBuild = () => {
  const folders = [
    `${config.node}/slick-carousel/slick`, 
    `${config.node}/jquery/dist`, 
    `${config.node}/normalize.css`,
    ];

  const tasks = folders.map(folder => {
    const pathFolder = `node_modules/${folder}`
    const nameFolder = pathFolder.match(/^[a-zA-Z0-9_]*\/([a-zA-Z0-9-_.]*)/)[1]

    return src(`${pathFolder}/**/*`).pipe(
      dest(`${config.src.libs}/${nameFolder}`),
    )
  })

  return merge(tasks)
};

В переменной folders прописываются пути к node_modules библиотекам, которые необходимо перенести в каталог libs.