node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


grunt-static-inline Build Status Build status

A grunt plugin to replace url from static files such as images, CSS, JS and variables and put them inline in a template.

Getting Started

This plugin requires Grunt >=0.4.0

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-static-inline --save-dev

One the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:


The "staticinline" task


In your project's Gruntfile, add a section named staticinline to the data object passed into grunt.initConfig().

  staticinline: {
    main: {
      options: {
        prefix: '@{',
        suffix: '}@',
        vars: {
          'hello': 'Hello World',
          'DOCTYPE': '<!DOCTYPE html>',
          'partial_include': '<%="test/fixtures/partial.html") %>'
        basepath: 'test/fixtures/'
      files: {
        'base_output.html': 'base_input.html'

In your template file you should add inline="true" where you want to replace it for inline content; the inline attributes will be removed afterwards.

    <title>static inline</title>
    <link href="css/main.css" rel="stylesheet" inline="true"/>  <!-- absolute url will use basepath option -->
    <script src="js/app.js" inline="true"></script> 
    <script src="js/common.js" inline="true"></script> 
    <img src="imgs/MIT_Sloan.png" width="38" height="44" title="MIT Sloan" alt="MIT Sloan" inline="true">
    <h1>@{hello}@, Grunt inline static content plugin</h1>


  • Take care to maintain the existing coding style.
  • Add unit tests for any new or changed functionality.
  • Lint and test your code using Grunt.
  • Open a pull request :)