区别(主要是原程序功能比较弱)
- html 目录超过 3层 就会报错
- 对 style、script、images 资源文件路径处理不佳,虽然有 docroot 但是需要一层一层传递
- 对 html 路径处理不佳,比如在不同的文件夹里面的 html include 同一个 nav.html,这个 nav 路径基本就挂了
- 不支持表达式,比如我需要在不同的页面让某个 nav 的连接选中
- ....
基本同 https://github.com/alanshaw/grunt-include-replace 增加一个 resroot 参数及 resroot 、absroot 全局变量
//include
include:
{
dev:
{
options:
{
includesDir : 'includes/',
prefix : '@',
suffix : ';',
resroot : '',
globals :
{
'var1' : 'globals var1 ...',
'var2' : 'globals var2 ...'
}
},
files:
[
{
src:
[
'*.html',
'test/**/*.html'
],
dest: '../'
}
]
}
}
Type: String
这个参数有点难描述清楚,取值为 "../" 是一个或者多个 向上目录,主要用于 修复 原始 html 与 生成 html 目录结构成绩不统一
<ul class="nav-list">
<li>
<a href="@absroot;index.html" class="<% if(nav === 'index') {%> current <% } %>">index</a>
</li>
<li>
<a href="@absroot;about.html" class="<% if(nav === 'about') {%> current <% } %>">about</a>
</li>
<li>
<a href="@absroot;test/test.html" class="<% if(nav === 'test1') {%> current <% } %>">test1</a>
</li>
<li>
<a href="@absroot;test/test/test.html" class="<% if(nav === 'test2') {%> current <% } %>">test2</a>
</li>
<li>
<a href="@absroot;test/test/test/test.html" class="<% if(nav === 'test3') {%> current <% } %>">test3</a>
</li>
</ul>
<link rel="stylesheet" href="@resroot;style/page.css">
<img src="@resroot;images/logo.png" alt="">
通过上面的 demo 代码有发现使用到 模板,对,里面引入了传说中最牛的 https://github.com/aui/artTemplate
所有带参数的 include 都会经过 template 处理,so 写个 if、for 简直就是小菜一碟了
- 整个程序大部分都参考了 https://github.com/alanshaw/grunt-include-replace
- 模板引擎使用了 https://github.com/aui/artTemplate
- 新手,程序难免有瑕疵,望大家多包涵,多斧正!