grunt-css-url-replace

Grunt task to replace css urls with absolute path

npm install grunt-css-url-replace
5 downloads in the last day
32 downloads in the last week
156 downloads in the last month

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");}

css/users/default.css

  .avatar{background-image:url("../../images/avatar.png");}
  .avatar{background-image:url("../../images/avatar.png?name=test");}

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

  .baner{background-image:url("/images/baner.png");}
  .baner{background-image:url("/images/baner.png#test");}
  .avatar{background-image:url("/images/avatar.png");}
  .avatar{background-image:url("/images/avatar.png?name=test");}

Contributors

License

Release History

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

npm loves you