Grunt，替换 css 中图像的路径

Question

编译项目时Grunt需要传入编译好的css个文件，一路替换成想要的图片。

我们需要这个是为了让外部包有自己的文件夹和图像，例如 dist/images/vendor。

您要搜索的文件是从通过 bower 设置的外部样式编译而来的。因此，每个插件都有自己的图像样式，因此决定将所有图像加载到一个文件夹中，并重写它们以适应。

我们有：

编译后的样式为dist/css/bundle-vendor.css.
fancybox 样式是 vendor/fancybox/source/jquery.fancybox.css.
fancybox 复制的图像是 dist/images/vendor。

因此：

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
    background-image: url('fancybox_sprite.png');
}

获取表格：

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
    background-image: url('../images/vendor/fancybox_sprite.png');
}

我想知道是否有一种解决方案可以保留从根目录到所需文件夹的路径。在这种情况下，我们得到以下内容：

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
    background-image: url('../images/vendor/fancybox/source/fancybox_sprite.png');
}

Answer 1

npm install grunt-string-replace --save

Grunt.js

grunt.loadNpmTasks('grunt-string-replace');

添加任务

string-replace

grunt.initConfig 添加

'string-replace': {
        inline: {
            src: [
                'dist/css/<%= that.name %>-vendor.css'
            ],
            dest: "dist/css/<%= that.name %>-vendor-rep.css",
            options: {
                replacements: [{
                    pattern:  /:(\s*)(url\(\s*[\"\']*)(?:[^\"\']+\/)?([^\/\"\'\)]+[\"\']*\s*\))/ig,
                    replacement: ': ../images/vendor/'
                }]
            }
        }
    }

谢谢@Visman

Grunt，替换 css 中图像的路径

Grunt, replacing path to image in css

node.js

gruntjs