Skip to content
This repository has been archived by the owner on Feb 21, 2023. It is now read-only.

nanjingboy/grunt-css-url-replace

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Feb 21, 2016
239937e · Feb 21, 2016

History

40 Commits
Nov 2, 2014
Nov 2, 2014
Jun 28, 2014
Aug 29, 2013
Feb 21, 2016
Nov 2, 2014
Jun 28, 2014
May 30, 2015
Feb 21, 2016

Repository files navigation

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