Grunt task to replace css urls with absolute path
JavaScript CSS
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
lib v0.2.3 Nov 2, 2014
tasks Revert "v0.2.1" Nov 2, 2014
test v0.1.9 Jun 28, 2014
.gitignore init gruntplugin Aug 29, 2013 v0.2.7 Feb 21, 2016
Gruntfile.js v0.2.3 Nov 2, 2014
LICENSE-MIT v0.2.5 May 30, 2015
package.json v0.2.7 Feb 21, 2016


Grunt task to replace css urls with absolute path

Getting Started

This plugin requires Grunt ~0.4.5

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:




Type: String Default value: 'public'

The root static directory in your website

Usage Examples

  css_url_replace: {
    options: {
      staticRoot: 'public'
    replace: {
      files: {
        'dest/build.css': ['css/application.css', 'css/users/default.css']

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

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


  .http { background-image: url(""); }
  .https_urls { background-image: url(""); }


  .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:

  .http { background-image: url(""); }
  .https_urls { background-image: url(""); }
  .data_urls { background-image: url("data:image/png:base64,0"); }
  .backslashes_urls { background-image: url("/images/e.png") }