grunt-relative-root

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>.github.io/<yourproject> before you repoint DNS. How do you make your pages work from both /<yourproject/ and /?

Add something like this to your Gruntfile:

grunt.loadNpmTasks('grunt-relative-root');

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

Getting Started

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

Options

root

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