Incorrect image paths

[roelvanduijnhoven]

For a project I am developing I want to bundle two CSS files from seperate directories into a file in a third directory. Each of these two source CSS files reference to images relative to their working directory. Obviously the paths are no longer correct after they have been bundled and stored in a third location.

I would expect css min to rewrite the url's so the change of location is reflected. This could be either done by:

• Rewriting the URLs to be absolute
• Rewriting the URLs so the relative path is updated

How can I accomplish this task? Or am I tackling the problem of bundling external libraries in a wrong way? Is the solution perhaps to just manually copy the needed assets to the correct location?

[shama]

This task is a wrapper for clean-css. You could try requesting this feature over there.

I believe they have root and relativeTo for @import inlining... not sure about url paths.

[kylecordes]

As you pointed out, clean-css has this features. If I understand right from here:

https://github.com/GoalSmashers/clean-css

grunt-contrib-cssmin would need to expose and/or automatically use the root or relativeto settings for this to work. Does it do so? Does it actually work?

[calebolin]

+1

[Sanabria]

+1!

[christang]

+2!

[jamesplease]

PRs are welcome to introduce these options to this task :)

[spooky]

+1

[dmkuznetsov]

+1

[delijah]

+1

[mrbbdx]

@roelvanduijnhoven @kylecordes @calebolin @Sanabria @christang @jmeas @spooky @dmkuznetsov @delijah

I fixed this on my project by adding the following grunt task, and yes, it actually works:

cssmin: {
    options: {
//        relativeTo: './', // Not needed for me
        root: './'
    },
    combine: {
        files: {
            'build/build.css': includes.css
        }
    }
}

Hope this helps someone else

[Buntix]

Looking in https://github.com/gruntjs/grunt-contrib-cssmin/blob/master/tasks/cssmin.js it seems to pass the options straight through, so presumably all the cleanCSS options should work.

As well as the absolute url fix from @bobjones above it's also possible to rebase with relative URLs using target: (I'm using it on a project where the development version has a completely different path to the production one). The cleanCSS options for this are at https://github.com/GoalSmashers/clean-css#how-to-rebase-relative-image-urls

As an example, my current Gruntfile.coffee config (pre any attempt to tidy - there's definitely something awry as I needed to double up /css/css/ in the target: to get the url rebasing right) is

    cssmin: 
      options:
        target: './web/css/css/'


      combine:
        files:
          'web/css/theme_combined.css': [
            'web/css/lib/ui-lightness/jquery-ui-1.10.3.custom.css'
            'web/css/lib/socialstream/css/dcsns_dark.css'
            'web/css/theme/bootstrap.css'
            'web/css/theme/bootstrap-theme.css'
            'web/css/theme/fonts/font-awesome/css/font-awesome.css'
            'web/css/theme/style.css'
            'web/css/theme/global.css'
            'web/css/theme/colors/magenta.css'
            'web/css/theme/theme-responsive.css'
          ]

[cdaringe]

Indeed, the rev history on the homepage states "2013-09-14   v0.6.2   Support relative URLs via clean-css ~1.1.1.". Not sure who has tested it yet, but if so, it may be nice to toss up a README update PR

[cdaringe]

#150 . as @bobjones mentions, you can pass this in via the options argument. Thus, @roelvanduijnhoven, can you create multiple targets using options: {relativeTo: '/path/name'}, then have a final target that combines the output of the former?