Relativize absolute paths in HTML and CSS
JavaScript HTML CSS


Build Status Dependency Status NPM Version

Relativize absolute paths in HTML and CSS.

You built some static website. Maybe you're gonna host it on gh-pages. Maybe you're squating a stellar domain name, but you'd rather review the site on <yourname><yourproject> before you repoint DNS. How do you make your pages work from both /<yourproject/ and /?

Add something like this to your Gruntfile:


  relativeRoot: {
    yourTarget: {
      options: {
        root: 'public'
      files: [{
        expand: true,
        cwd: '<%= relativeRoot.yourTarget.options.root %>',
        src: ['*.css', '*.html'],
        dest: 'out/'

Getting Started

Grunt at least a ~0.4.1

You should be comfy with the grunt basics and npm so you can install this in your project

npm install grunt-relative-root --save-dev



Type: String Default value: '.'

Local directory used as the base for relative paths. If root: 'public' then the URL '/images/logo.png' in the file 'public/events/solstice.html' will be rewritten as '../image/logo.png'.