Grunt task to include files and replace variables. Allows for parameterised includes and conditional if blocks.
html
Hello World!
{{ include('/path/to/include/message.html', {"name": "Joe Bloggs"}) }}
`
message.html
`html
Hello, {{ name }}!
`
Result:
`html
Hello World!
Hello, Joe Bloggs!
`
$3
hello.html
`html
Hello World!
{{ include('/path/to/include/message.html', {"name": "Joe Bloggs", "morning": true}) }}
`
message.html
`html
{{ if morning }}
Good morning, {{ name }}!
{{ endif }}
{{ if afternoon }}
Good afternoon, {{ name }}!
{{ endif }}
`
Result:
`html
Hello World!
Good morning, Joe Bloggs!
`
$3
`html
{{ var $size-1: "small" }}
{{ var $size-2: "medium" }}
{{ var $size-3: "large" }}
My cat is $size-1.
My dog is $size-2.
My horse is $size-3.
But all of them have things that are $size-1, $size-2 and $size-3 in relation to their own size.
{{ include('inc.html', {"biggest": "$size-3"}) }}
`
inc.html
`html
But which is the biggest size? {{ biggest }}
`
Result:
`html
My cat is small.
My dog is medium.
My horse is large.
But all of them have things that are small, medium and large in relation to their own size.
But which is the biggest size? large
`
Getting Started
This plugin requires Grunt ~0.4.1
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:
`shell
npm install grunt-include-replace-more --save-dev
`
One the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
`js
grunt.loadNpmTasks('grunt-include-replace-more');
`
The "includereplacemore" task
$3
The task allows you to preprocess your project file contents by replacing placeholder "variables" and including content from other files. In addition to "global" variables that are replaced in all files you specify, the task introduces the concept of "local" variables, which are passed as parameters to included files.
WARNING: The task _does not_ check for recursive includes.
In your project's Gruntfile, add a section named includereplacemore to the data object passed into grunt.initConfig().
`js
grunt.initConfig({
includereplacemore: {
your_target: {
options: {
// Task-specific options go here.
}
// Files to perform replacements and includes with
src: '*.html',
// Destination directory to copy files to
dest: 'dist/'
}
}
})
`
$3
#### options.globals
Type: Object
Default value: {}
Global variables availabe for replacement in all files.
#### options.prefix
Type: String
Default value: {{
Variable/include directive prefix. Careful when changing as it is added to the regular expression used for finding variables to be replaced.
Must be at least 1 character, otherwise resets to default value.
#### options.suffix
Type: String
Default value: }}
Variable/include directive suffix. Careful when changing as it is added to the regular expression used for finding variables to be replaced.
Must be at least 1 character, otherwise resets to default value.
#### options.startIf
Type: String
Default value: if
If variable directive prefix. Careful when changing as it is added to the regular expression used for finding variables to be replaced.
Must be at least 1 character, otherwise resets to default value.
#### options.endIf
Type: String
Default value: endif
If variable directive suffix. Careful when changing as it is added to the regular expression used for finding variables to be replaced.
Must be at least 1 character, otherwise resets to default value.
#### options.includesDir
Type: String
Default value: Relative to including file
Directory where includes will be resolved.
#### options.docroot
Type: String
Default value: .
{{ docroot }} is a magic local variable that contains the relative path from the file that uses it to the path specified.
#### options.processIncludeContents
Type: Function
Default value: undefined
A function called for every included file prior to processing by grunt-include-replace. It is passed the include file contents and local variables as parameters and should return the (possibly altered) file contents.
$3
#### Default Options
`javascript
includereplacemore: {
dist: {
options: {
globals: {
var1: 'one',
var2: 'two',
var3: 'three'
},
},
src: '*.html',
dest: 'dist/'
}
}
`
##### Files array format
`javascript
includereplacemore: {
dist: {
options: {
globals: {
var1: 'one',
var2: 'two',
var3: 'three'
},
},
files: [
{src: 'js/*/.js', dest: 'dist/', expand: true, cwd: 'src/'},
{src: '*.css', dest: 'dist/css/', expand: true, cwd: 'src/css'}
]
}
}
`
##### Files object format
`javascript
includereplacemore: {
dist: {
options: {
globals: {
var1: 'one',
var2: 'two',
var3: 'three'
},
},
files: {
'dist/js/': ['/.js', '!dist//.js'],
'dist/css/': ['/.css', '!dist//.css']
}
}
}
`
#### Custom Options
The following example allows include statements to appear as comments in HTML files by altering the prefix and suffix. The prefix and suffix for conditional IF blocks is also changed. Also all includes are resolved relative to the directory inc/ (relative to your Gruntfile) rather than relative to including file.
`javascript
includereplacemore: {
dist: {
options: {
prefix: '',
startIf: ' _if_ ',
endIf: ' _endif_ ',
includesDir: 'inc/'
},
src: '*.html',
dest: 'dist/'
}
}
`
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
* 2014-12-17 v1.3.1 Make includePath available as a local variable
* 2014-04-12 v1.3.0 Added conditional if blocks and ability to set up custom variables
* 2013-12-30 v1.2.0 Rename like grunt-contrib-copy by specifying dest filename (for single files)
* 2013-06-19 v1.1.0 Added magic local variable @@docroot`: relative path from the file that uses it to the path specified