grunt-injector

Inject references to files into other files (think scripts and stylesheets into an html file)

Getting Started

Current plugin requires Grunt ~1.0.0 and supports node engine >=4.0.0.

Plugin versions v1.0.1 (and earlier) require Grunt >=0.4.x and support node engine >= 0.8.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-injector --save-dev

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

grunt.loadNpmTasks('grunt-injector');

The "injector" task

Overview

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

grunt.initConfig({
  injector: {
    options: {
      // Task-specific options go here.
    },
    your_target: {
      // Target-specific file lists and/or options go here.
    },
  },
})

Options

options.template

Type: String Defaulting to dest property of file group

The filename for the source template where you have your injection tags. If not provided, the given dest file must exist and will be used as source template as well, and therefor will be modified on injection.

options.templateString

Type: String Default value: NULL

The contents of the template to use. If specified it overrides the template option.

options.ignorePath

Type: String|Array Default value: NULL

A path or paths that should be removed from each injected file path.

options.addRootSlash

Type: Boolean Default value: !options.relative

Specifies if a root slash (/) should be added to all paths.

options.relative

Type: Boolean Default value: true

Specifies if relative paths should be injected.

options.destFile

Type: String Default value: NULL

Used to override the dest property of file groups, which is necessary when using dynamically built files objects.

options.min

Type: Boolean Default value: false

If set to true each injected file will be switched to its minified counterpart (i.e. *.min. files), if it exists that is otherwise the original file is used as usual.

options.starttag

Type: String Default value: <!-- injector:{{ext}} -->

Set the start tag that the injector is looking for. {{ext}} is replaced with file extension name, e.g. "css", "js" or "html". The extension for files collected from from Bower components is prepended with option bowerPrefix if given.

options.endtag

Type: String Default value: <!-- endinjector -->

Set the end tag that the injector is looking for. {{ext}} is replaced with file extension name, e.g. "css", "js" or "html". The extension for files collected from from Bower components is prepended with option bowerPrefix if given.

options.prefix

Type: String Default value: ''

Set the prefix to append to the beginning of each injected file. Useful to change the directory name in combination with ignorePath.

options.postfix

Type: String Default value: ''

Set the postfix to append to the end of each injected file. Useful to reset cached resources like "/path/to/script.js?offset01".

options.bowerPrefix

Type: String Default value: NULL

Set prefix for file extension when replacing {{ext}} in start and end tag (see above). Added in v.0.5.0. To keep old behaviour set this to "bower:". See Bower dependency injection below as well.

options.lineEnding

Type: String Default value: null

Configure what lineEnding character(s) to use between injections. If no value specified, grunt injector will try to figure out the default line ending character(s) from template files.

options.transform

Type: Function Params: filepath, index (0-based file index), length (total number of files to inject) Default value: a function that returns:

• For css files: <link rel="stylesheet" href="<filename>.css">
• For js files: <script src="<filename>.js"></script>
• For html files: <link rel="import" href="<filename>.html">

Used to generate the content to inject for each file.

options.clean

Type: Boolean Default value: false

Set to true to clean all the files listed between the inject tags.

options.sort

Type: Function Params: a, b (is used as compareFunction for Array.prototype.sort) Default value: NULL

If set the given function is used as the compareFunction for the array sort function, to sort the source files by.

N.B. Shouldn't be used in conjunction with a bower.json file as source, because wiredep, which collects Bower installed dependencies, has some intelligent sorting built in.

Usage Examples

Injecting into html file with default options

index.html:

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
  <!-- injector:css -->
  <!-- endinjector -->
</head>
<body>

  <!-- injector:js -->
  <!-- endinjector -->
</body>
</html>

Gruntfile.js:

grunt.initConfig({
  injector: {
    options: {},
    local_dependencies: {
      files: {
        'index.html': ['**/*.js', '**/*.css'],
      }
    }
  }
})

After injection

index.html:

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
  <!-- injector:css -->
  <link rel="stylesheet" href="file1.css">
  <link rel="stylesheet" href="file2.css">
  <!-- endinjector -->
</head>
<body>

  <!-- injector:js -->
  <script src="file1.js"></script>
  <script src="file2.js"></script>
  <!-- endinjector -->
</body>
</html>

Bower dependency injection

The grunt-injector can be used to inject your installed Bower Components as well. To do this the module wiredep is used, and here's how the configuration can look like in that case:

N.B From version 0.5.0 the {{ext}} in the starttag is not prefixed with bower: by default anymore! To keep the old behaviour set the bowerPrefix to "bower:".

Gruntfile.js:

grunt.initConfig({
  injector: {
    options: {},
    bower_dependencies: {
      files: {
        'index.html': ['bower.json'],
      }
    }
  }
})

index.html:

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
  <!-- injector:css -->
  <!-- endinjector -->
</head>
<body>

  <!-- injector:js -->
  <!-- endinjector -->
</body>
</html>

Remove all the injection for a specific environment

index.html:

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
</head>
<body>

  <!-- injector:js -->
  <script src="scripts/mock/mock-service.js"></script>
  <!-- endinjector -->
</body>
</html>

Gruntfile.js:

grunt.initConfig({
  injector: {
    dev: {
      options: {},
      files: {
        'index.html': ['script/mock/*.js'],
      }
    },
    dist: {
      options: {
        clean: true
      },
      files: {
        'index.html': [],
      }
    }
  }
})

After injection

index.html:

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
</head>
<body>

  <!-- injector:js --><!-- endinjector -->
</body>
</html>

Other configurations

For more advanced task configurations see the Gruntfile.js in this repository and have a look at the tests in test/injector_test.js.

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Release History

1.1.11 - 2019-01-03

• Update dependencies and devDependencies
• minimum NodeJs is v4
• Introducing a clean option to force remove all the files listed in the template file, if any
  • #49

1.1.0 - 2016-10-10

• Update dependencies and devDependencies (#48)
• Fix #51
• Add postfix option

1.0.1 - 2016-05-20 - fix (#41)

1.0.0 - 2016-04-23

• Update readme with travis badge (#44)
• Adding prefix option (#42)
• Update peerDependencies to support Grunt 1.0
• Make lineEnding default value to the destination file's line ending (#36)
• Do not write empty lines (#34)

0.6.0 - 2014-11-26 - Adding relative option (#15)

0.5.4 - 2014-07-22 - Now able to handle overrides in bower.json (#11)

0.5.3 - 2014-07-16

• Fixing addRootSlash=false problem with ignorePath #10
• Adding lineEnding option #8
• Clearing content before injection #3
• Allow multiple uses of {{ext}} in tags #5

0.5.2 - 2014-03-05 - Getting bower components directory from .bowerrc file if it exists (Fixes: #2)

0.5.1 - 2014-02-21 - Adding addRootSlash option (Fixes: #1)

0.5.0 - 2013-12-29 - Removing the default bower: prefix for Bower injections (see Bower dependency injection above)

0.4.1 - 2013-12-23 - Fixing index and length params for transform function

0.4.0 - 2013-12-23 - Adding templateString option

0.3.1 - 2013-12-15 - Fixing possibility to provide ignorePath as array

0.3.0 - 2013-12-10 - Adding sort option to be able to sort files. Also rewriting for performance which removes unnecessary injections for dynamic file objects

0.2.0 - 2013-11-20 - Don't write to destination file if it hasn't been changed by the injector (useful to not trigger any unnecessary watch tasks if applicable)

0.1.2 - 2013-11-17 - Making it possible to only provide destFile and not template

0.1.1 - 2013-11-17 - ignorePath now only removes from start of path

0.1.0 - 2013-11-17 - First release