grunt-modulate

Templating HTML module.

grunt-modulate

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-dev

Once 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.gif
modulate: {
    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.