使用 Grunt.js 进行局部静态 HTML 编译 [关闭]答案

【问题标题】：Static HTML compilation with partials using Grunt.js [closed]使用 Grunt.js 进行局部静态 HTML 编译 [关闭]
【发布时间】：2013-08-18 07:05:33
【问题描述】：

我一直在寻找可以让我使用 Grunt 预编译静态网站的东西。它需要有部分，所以我可以在页面中包含诸如通用页眉/页脚之类的内容。

到目前为止，我只真正找到了 Jade，它有一个 grunt 插件，以及用于 Grunt 的 this 插件，它将 Dust.js 模板编译为静态 HTML。我不太喜欢 Jade 的语法，而且 Grunt 的 Dust 插件也不太理想。

是否有任何支持 Grunt/Gulp 的静态 HTML 模板语言不会偏离常规 HTML 太多，并且仍然有效？

【问题讨论】：

“不太理想”是什么意思？

标签： html web pug dust.js

【解决方案1】：

我发现这个插件名为grunt-includes。我一直在寻找你问题的答案。这是我见过的第一个看起来很容易使用的。所有其他人似乎也许具有此功能，但做了 20 倍的其他事情，因此它们似乎是适合这项工作的错误工具。

这对我来说缺少的一件事是能够为相对路径添加前缀。我正在与modest 的开发人员交谈，这正在成为一个更好的选择。

更新：grunt-includes-replace 几乎一样简单，可以为相对路径添加前缀。 IE：它可以让你传入变量。

【讨论】：

grunt-includes-replace 简单实用。正是我需要的！谢谢。

【解决方案2】：

我使用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 有更多示例和更详细的文档

【讨论】：

【解决方案3】：

我在使用 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

对我来说效果很好。它确实需要一些学习曲线，并且随着文档的继续工作，文档可能会有所改进。

【讨论】：