Копирование активов, на которые ссылаются файлы css

Есть ли способ, используя Gulp, копировать активы, такие как изображения и шрифты, на которые ссылаются файлы CSS в определенный каталог?Копирование активов, на которые ссылаются файлы css

Например, при наборе Bootstrap 3 вместе с остальными моими CSS-файлами мне нужно, чтобы шрифты были скопированы и их URL-адреса были переустановлены в новый каталог.

Я мог бы сделать это с помощью Webpack и комбинацию погрузчиков (style-loader, css-loader, url-loader и file-loader), но для этого проекта мне нужно не использовать ничего, кроме Глоток и его плагинов.

Редактировать: Я собираюсь попытаться быть более ясным.

Я снова использую пример Bootstrap 3: его файл CSS ссылается на шрифты, которые он использует через url(). Что мне нужно сделать, так это посмотреть, какие шрифты указаны в этих url(), скопируйте их в мой каталог /public/ и, наконец, переустановите эти url(), чтобы шрифты могли нормально обслуживаться.

источник

2016-09-07 Valmir Junior

Первая часть вашего вопроса звучит, как вам нужно разобрать CSS, создать список ссылочных файлов из , а затем работать с этим списком (возможно, используя его для вашего 'gulp.src'?). Но вторая часть вашего вопроса говорит о том, что вам нужно что-то значительно отличное: 1) копировать файлы из известного каталога и 2) запускать некоторые файлы CSS и настраивать пути к структуре папок скомпилированного проекта. // Можете ли вы сказать больше о том, что вам нужно делать? – henry

Добавлена дополнительная информация к вопросу. –

Я добился того, что мне нужно, используя gulp-postcss, а также postcss-url.

"use strict"; 

const Gulp = require("gulp"); 
const GulpRename = require("gulp-rename"); 
const GulpPostCSS = require("gulp-postcss"); 
const PostCSSImport = require("postcss-import"); 
const PostCSSURL = require("postcss-url"); 

Gulp.task("css", function() { 
    return Gulp 
    .src("./assets/css/index.css") 
    .pipe(
     GulpPostCSS([ 
      PostCSSImport(), 
      PostCSSURL({ 
       url: "copy", 
       useHash: true 
      }) 
     ], { 
      from: "./assets/css/index.css", 
      to: "./public/bundle.css" 
     }) 
    ) 
    .pipe(GulpRename("bundle.css")) 
    .pipe(Gulp.dest("./public/")); 
});

Также возможно сделать это совершенно без Глоток, только с postcss-cli:

"scripts": { 
    "build:css": "postcss ./assets/css/index.css --use postcss-import --use postcss-url --postcss-url.url 'copy' --postcss-url.useHash true --output ./public/bundle.css" 
},

источник

2016-09-08 12:42:20

Копирование активов, на которые ссылаются файлы css

ответ

Смежные вопросы