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 add

'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: ': $2../images/vendor/$3'
                }]
            }
        }
    }

Thx @Visman

Grunt，在css中替换图像的路径

1 个答案: