如何使用Grunt重写供应商CSS文件中的图像网址 [英] How to rewrite urls of images in vendor CSS files using Grunt

问题描述

我试图将前端依赖从版本控制系统中移出。 Bower.io和Grunt的组合应该能够做到这一点。

然而，我仍然无法解决绑定多个供应商库的问题。例如，假设我有以下目录结构，其中 components 目录是Bower.io将依赖关系保存在其中的目录：

 ├──资产
└──组件
├──引导程序
│├──img 
││└──glyhs.gif 
│└──less 
│└──bootstrap.css 
└──jquery-ui 
├──css 
│└──style.css 
 └──images 
├──next.gif 
└──prev.gif 
  

现在假设我想捆绑jQuery的 style.css 和Bootstrap' bootstrap.css 。我将把这个捆绑文件保存在 assets / bundled.css 中。

然而，在这个文件中，对原始图像（../images/next.gif和../img/glyhs.gif）的引用是不正确的。他们将不得不重写才能工作（所以../images/next.gif => ../components/jquery-ui/images/next.gif）。我相信（d）URL的重写是Grunt应该能够做到的。 但我似乎无法使用cssmin / less / copy任务使其工作。例如下面的Grunt设置（仅移动1个文件）失败：

  module.exports = function（grunt）{
 grunt.initConfig（{
 pkg：grunt.file.readJSON（'package.json'），
 less：{
 options：{
 compile：false，
 relativeUrls：true 
}，
 bootstrap：{
 src：'components / bootstrap / less / bootstrap.less'，
 dest：'assets / bootstrap.css' 
} 
} 
}）; 
 grunt.loadNpmTasks（'grunt-contrib-less'）; 
 grunt.registerTask（'dist-css'，['less']）; 
}; 
  

或者：

• 我是否配置了Grunt或做错了什么？
  

• 或者我描述的工作流程不是正确的，我应该使用另一个。





谢谢！


解决方案

仅供参考：解决方案一应俱全我将这个问题发布到CleanCss grunt插件上，他们已经接受它并在1.1新版本中发布了此行为。





您可以在GitHub跟踪器上找到问题这里： https://github.com/GoalSmashers/clean-css/issues/129





该库可以使用绝对重写（从根目录）或基于新的输出目录更改相对图像路径。查找 - 根或 - 输出指示。





感谢提示和答案的人！




I am trying to move frontend dependencies out of the version control system. A combination of Bower.io and Grunt should be able to do this.

A problem however occurs that I am yet unable to solve with bundling multiple vendor libraries. For example assume I have the following directory structure where the components directory is the directory that Bower.io saves the dependencies in:

├── assets
└── components
    ├── bootstrap
    │   ├── img
    │   │   └── glyhs.gif
    │   └── less
    │       └── bootstrap.css
    └── jquery-ui
        ├── css
        │   └── style.css
        └── images
            ├── next.gif
            └── prev.gif

Now assume I want to bundle both jQuery's style.css and Bootstrap' bootstrap.css. I will save this bundled file in assets/bundled.css.

However in this file the references to the original images (../images/next.gif and ../img/glyhs.gif) are incorrect. They will have to be rewritten in order to work (so ../images/next.gif => ../components/jquery-ui/images/next.gif). I believe(d) this rewriting of URLs is something Grunt should be able to do. But I can not seem to get this to work using the cssmin/less/copy tasks. For example the following Grunt setup (only moving 1 file) fails to work:

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        less: {
            options: {
                compile: false,
                relativeUrls: true
            },
            bootstrap: {
                src: 'components/bootstrap/less/bootstrap.less',
                dest: 'assets/bootstrap.css'
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.registerTask('dist-css', ['less']);
};

Either:

• Have I misconfigured Grunt or done something wrong?

• Or is the workflow I am describing simply not the right one and should I use another one instead.

Thanks!

解决方案

Just for reference: there is now a solution readily available. I posted this same issue to the CleanCss grunt plugin, and they have accepted it and published this behaviour in their new 1.1 release.

You can find the issue on the GitHub tracker here: https://github.com/GoalSmashers/clean-css/issues/129

This library makes it possible to either use absolute rewriting (from a root directory) or alter relative image paths based on a new output directory. Look for the --root or --ouput directives.

Thanks for the tips and answers people!

这篇关于如何使用Grunt重写供应商CSS文件中的图像网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！