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.
Permalink
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
CHANGELOG.md v0.2.7 Feb 21, 2016
Gruntfile.js v0.2.3 Nov 2, 2014
LICENSE-MIT
README.md v0.2.5 May 30, 2015
package.json v0.2.7 Feb 21, 2016

README.md

grunt-css-url-replace

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:

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'
    },
    replace: {
      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

License