grunt-css-url-replace

Grunt task to replace css urls with absolute path

Getting Started

This plugin requires Grunt ~0.4.1

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-css-url-replace --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-css-url-replace');

Options

options.staticRoot

Type: String Default value: 'public'

The root static directory in your website

Usage Examples

grunt.initConfig({
  css_url_replace: {
    options: {
      staticRoot: 'public'
    },
    files: {
      'dest/build.css': ['css/application.css', 'css/users/default.css']
    }
  }
});

In this example, imagine the following folder structure and css contents:

public
├── css
│   └─── application.css
|   └─── users
|        └─── default.css
├── images
|   └── baner.png
|   └── avatar.png

css/application.css

  .baner{background-image:url("../images/baner.png");}
  .baner{background-image:url("../images/baner.png#test");}
  .http { background-image: url("http://somehost.com/image.png"); }
  .https_urls { background-image: url("https://somehost.com/image.png"); }

css/users/default.css

  .avatar{background-image:url("../../images/avatar.png");}
  .avatar{background-image:url("../../images/avatar.png?name=test");}
  .data_urls { background-image: url('data:image/png:base64,0'); }
  .backslashes_urls { background-image: url('\images\e.png') }

the generated file dest/build.css is would be:

  .baner{background-image:url("/images/baner.png");}
  .baner{background-image:url("/images/baner.png#test");}
  .http { background-image: url("http://somehost.com/image.png"); }
  .https_urls { background-image: url("https://somehost.com/image.png"); }
  .avatar{background-image:url("/images/avatar.png");}
  .avatar{background-image:url("/images/avatar.png?name=test");}
  .data_urls { background-image: url("data:image/png:base64,0"); }
  .backslashes_urls { background-image: url("/images/e.png") }

Contributors

superbug

andersjanmyr

Nehle

License

MIT

Release History

2014-06-28 v0.1.9 Fixed parser error for url with backslashes

2014-05-29 v0.1.7 Fixed parser error for absolute url

2014-01-22 v0.1.5 Fixed parser error when url include hash and question mark values

2013-09-05 v0.1.3 Fixed parser error when url is like images/demo.png

2013-09-05 v0.1.1 Fixed parser error when has more then 2 urls in one line content

2013-08-29 v0.1.0 Release the first version

Kukkimonsuta / grunt-css-url-replace