我一直在寻找可以让我使用 Grunt 预编译静态网站的东西。它需要有部分内容,因此我可以在页面中包含诸如通用页眉/页脚之类的内容。
到目前为止,我只找到了Jade,它有一个 grunt 插件,以及这个用于将 Dust.js 模板编译为静态 HTML 的 Grunt 插件。我不太喜欢 Jade 的语法,而且 Grunt 的 Dust 插件也不太理想。
是否有任何支持 Grunt/Gulp 的静态 HTML 模板语言不会偏离常规 HTML 太多,并且仍然有效?
我发现了这个名为grunt-includes 的插件。我一直在寻找你问题的答案。这是我见过的第一个看起来很容易使用的。所有其他人似乎都可能具有此功能,但做了 20 倍的其他事情,因此它们似乎是适合这项工作的错误工具。
这对我来说缺少的一件事是能够为相对路径添加前缀。我正在与适度的开发人员交谈,这正在成为一个更好的选择。
更新:有一个grunt-includes-replace几乎一样简单并且可以为相对路径添加前缀。IE:它可以让你传入变量。
我在使用 grunt plugin assemble 方面取得了一些成功。刚开始用的时候拍了几个视频:
http://www.youtube.com/watch?v=oRwL5Y7K0CM (5:43)
http://www.youtube.com/watch?v=R9Jj9ciA2wM (16:44)
这是官方网站:
https://github.com/assemble/assemble
从该站点您可以看到如何使用部分;例如:
assemble: {
options: {
assets: 'assets',
partials: ['docs/includes/**/*.hbs'],
data: ['docs/data/**/*.{json,yml}']
},
pages: {
src: ['docs/*.hbs'],
dest: './'
}
}
然后基本上你可以运行类似的东西:
grunt assemble
或者对于更细粒度的控制,您可以执行 assemble 目标的任务,例如:
grunt assemble:your_target
这对我来说效果很好。它确实需要一些学习曲线,并且随着文档的继续工作,文档可能会有所改进。
我使用https://npmjs.org/package/grunt-dust预编译带有部分的灰尘模板。
的相关部分Gruntfile.js
可能如下所示:
dust: {
defaults: {
files: {
'views/index.js': 'views/**/*.dust'
},
options: {
wrapper: 'commonjs',
runtime: false,
wrapperOptions: {
returning: 'dust',
deps: {
dust: 'dustjs-linkedin',
dustHelpers: 'dustjs-helpers'
}
}
}
}
},
这会将所有已编译的灰尘模板放在一个views/index.js
.
在https://github.com/vtsvang/grunt-dust有更多示例和更详细的文档