相关疑难解决方法(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']);
};

或者: …

我正在为我们的项目设置grunt-usemin,但是我正在运行一个小问题cssmin.

我们的项目取决于一些外部库,其中一些带来了一些额外的资源(如图像或字体).问题是这些库没有相同的文件夹结构.

这是不同文件夹结构的示例

lib
|--lib1
|   |--style1.css
|   +--image1.png
+--lib2
   |--styles
   |   +--style2.css
   +--images
       +--image2.png

在index.html中,所有样式表都被引用并放在构建块中.因此,当执行usemin任务时,库的样式表在一个缩小的文件中连接并放入输出文件夹中.相应的资产(图像)也会复制到此输出文件夹并在img文件夹中分页.输出文件夹结构如下

out
|--allstyles.min.css
|--image1.png
+--image2.png

您可以猜到,连接的样式表(在此示例中)具有两个不同的相对URI:

• image1.png
• ..\images\image2.png

这导致无法找到某些图像的问题.我需要一个解决方案来将所有相对URI重新绑定到out文件夹.我尝试使用任务target和root选项,cssmin但无济于事.有人能指出我这个任务的正确配置还是另一个可以实现我正在寻找的Grunt任务？

提前致谢!