CSSファイルで参照されるアセットをコピーする

Question

Gulpを使用して、CSSファイルで参照される画像やフォントなどのアセットを特定のディレクトリにコピーする方法はありますか？

例えば、ブートストラップ3を残りのCSSファイルと一緒にバンドルするときは、フォントをコピーしてURLを新しいディレクトリにリベースする必要があります。

私はこの使用のWebPACKとローダー（style-loader、css-loader、url-loaderとfile-loader）の組み合わせを行うことができますが、このプロジェクトのために私はガルプとそのプラグイン以外の何も使用しないする必要があります。

編集：私はより明確にしようとします。

もう一度Bootstrap 3の例を使用します。そのCSSファイルは、使用するフォントをurl()で参照します。私がする必要があるのは、url()でどのフォントが参照されているのかを確認し、/public/ディレクトリにコピーし、最後にこれらのフォントを正しく処理できるようにrebaseします。url()

Answer 1

私は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" 
},