Question

有没有办法使用Gulp将CSS文件中引用的资源（如图像和字体）复制到特定目录？

例如，在将Bootstrap 3与其余CSS文件捆绑在一起时，我需要复制字体并将其URL重新绑定到新目录。

我可以使用Webpack和加载器的组合（style-loader，css-loader，url-loader和file-loader）来做到这一点，但是对于这个项目我不需要使用任何其他比古尔普及其插件。

编辑：我会尝试更清楚。

我将再次使用Bootstrap 3示例：它的CSS文件通过url()引用它使用的字体。我需要做的是查看这些url()中引用的字体，将它们复制到我的/public/目录，最后重新定义这些url()，以便正确地提供字体。< / p>

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/"));
});

也可以完全没有Gulp，仅使用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"
},

复制css文件中引用的资产

1 个答案: