grunt-css-url-relative v0.0.6

grunt-css-url-relative

Github fork of nanjingboy's grunt-css-url-replace https://github.com/nanjingboy/grunt-css-url-replace

Grunt task to replace css urls with corrected relative paths.

Getting Started

This plugin requires Grunt ~0.4.2

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-relative --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-relative');

Options

options.staticRoot

Type: String Default value: 'public'

The root static directory in your website

Usage Examples

grunt.initConfig({
  css_url_relative: {
    styles: {
      options: {
        staticRoot: 'public'
      },
      files: {
        'public/dest/build.css': ['public/css/application.css', 'public/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
├── dest
|   └── build.css

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

Fork of grunt-css-url-replace

• nanjingboy

Contributors of grunt-css-url-replace

• superbug
• Nehle

License

• MIT