Templating HTML module.
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:
npm install grunt-modulate --save-devOnce the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-modulate');This plugin was designed to work with Grunt 0.4.x. If you're still using grunt v0.3.x it's strongly recommended that you upgrade, but in case you can't please use v0.3.2.
Run this task with the grunt modulate command.
Task targets, files and options may be specified according to the grunt Configuring tasks guide.
Type: Boolean
Default value: false
Convert to relative path, or not.
Type: RegExp
Default value: /([\t\ ]*?)((<!--\s#module\s"(.*?)"\s-->)([\S\s]*?)(<!--\s\/#module\s-->))/g
Regular expression for validating template tags.
Type: RegExp
Default value: /(href=|src=)("|')(.*?)("|')/g
Regular expression for validating url type and url.
Type: Array
Default value: [/^#/, /^mailto:/, /^(\/|http|https|ftp):\/\//]
Regular expression list for validating null link (hash link), mail link, absolute path.
.
├── Gruntfile.js
├── node_modules
├── package.json
└── test
├── 1
│ ├── sub
│ │ ├── test1.html
│ │ └── test2.html
│ ├── test1.html
│ └── test2.html
├── 2
│ ├── sub
│ │ ├── test1.html
│ │ └── test2.html
│ ├── test1.html
│ └── test2.html
└── assets
├── html
│ └── modules
│ └── _src
│ ├── _mod-bar.html
│ ├── _mod-baz.html
│ └── _mod-foo.html
└── img
└── img.gifmodulate: {
modules: {
options: {
relativate: true
},
files: [
{
expand: true,
cwd: 'test',
src: ['**/*.html', '!**/_src/*.html'],
dest: 'test'
}
]
}
}e.g. test/assets/html/module/_src/_mod-foo.html
If you want to convert to relative path, href attribute value must be site-root relative path.
<div class="mod-foo">
<ul>
<li><a href="#">Null Link</a></li>
<li><a href="#foo">Hash Link</a></li>
<li><a href="http://google.com">Internal Link</a></li>
<li><a href="https://google.com">Internal Link</a></li>
<li><a href="mailto:hoge@gmail.com">Mail Link</a></li>
<li><a href="/1/test1.html">/1/test1.html"</a></li>
<li><a href="/1/test2.html">/1/test2.html"</a></li>
<li><a href="/1/sub/test1.html">/1/sub/test1.html</a></li>
<li><a href="/1/sub/test2.html">/1/sub/test2.html</a></li>
<li><a href="/2/test1.html">/2/test1.html</a></li>
<li><a href="/2/test2.html">/2/test2.html</a></li>
<li><a href="/2/sub/test1.html">/2/sub/test1.html</a></li>
<li><a href="/2/sub/test2.html">/2/sub/test2.html</a></li>
</ul>
</div>e.g. test/1/sub/test1.html
Module path must be site-root relative path.
<!-- #module "/assets/html/modules/_src/_mod-foo.html" --><!-- /#module -->e.g. test/1/sub/test1.html
Module path must be site-root relative path.
<!-- #module "/assets/html/modules/_src/_mod-foo.html" -->
<div class="mod-foo">
<ul>
<li><a href="#">Null Link</a></li>
<li><a href="#foo">Hash Link</a></li>
<li><a href="http://google.com">Internal Link</a></li>
<li><a href="https://google.com">Internal Link</a></li>
<li><a href="mailto:hoge@gmail.com">Mail Link</a></li>
<li><a href="../test1.html">/1/test1.html"</a></li>
<li><a href="../test2.html">/1/test2.html"</a></li>
<li><a href="test1.html">/1/sub/test1.html</a></li>
<li><a href="test2.html">/1/sub/test2.html</a></li>
<li><a href="../../2/test1.html">/2/test1.html</a></li>
<li><a href="../../2/test2.html">/2/test2.html</a></li>
<li><a href="../../2/sub/test1.html">/2/sub/test1.html</a></li>
<li><a href="../../2/sub/test2.html">/2/sub/test2.html</a></li>
</ul>
</div>
<!-- /#module -->Modullatte by mach3
- 2013-05-17 v0.1.0 Work in progress, not yet officially released.