相关疑难解决方法(0)

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

然而,出现了一个问题,即我无法解决捆绑多个供应商库的问题.例如,假设我有以下目录结构,其中组件目录是Bower.io保存依赖项的目录:

??? assets
??? components
    ??? bootstrap
    ?   ??? 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']);
};

或者: …

我正在使用yeoman + angular并试用'yeoman build:minify'.这失败是因为任务rev:img重命名所有图像.之后,动态源(请参阅http://docs.angularjs.org/api/ng.directive:ngSrc)不再起作用.

有人知道解决这个问题的技巧吗？例如,是否可以避免图像重命名？

当我构建我的Yeoman项目时(没有什么特别的,我只使用jQuery和Modernizr),用于CSS的图像没有显示.

我的CSS代码

.contact {
    background:url(../icon-contact.png) no-repeat top center;
}

构建应用程序后的输出(没有区别)

.contact {background:url(../icon-contact.png) no-repeat top center;}

这不起作用,因为icon-contact.png的文件名已更改为f91724e0.icon-contact.png.

如何确保在缩小的CSS文件中更新图像路径？

编辑:我已经添加了我的解决方案作为答案