使用Grunt.js进行静态HTML编译和局部文件的整合

Question

我一直在寻找能够使用Grunt进行静态网站预编译的工具，需要支持局部模板，以便在页面中包含共同的头部/底部等内容。

到目前为止，我只发现了Jade，它有一个Grunt插件; 和 这个 Grunt插件可以将Dust.js模板编译成静态HTML。我不太喜欢Jade的语法，而Grunt的Dust插件也不太理想。

是否有任何静态HTML模板语言支持Grunt / Gulp并且与常规HTML差异不大，并且仍然活跃？

- AAA

---

“Less than ideal” 是什么意思？ - thefourtheye

Answer 1

我找到了这个名为grunt-includes的插件。 我一直在寻找您的问题的答案，这是我看到的第一个似乎易于使用的解决方案。所有其他的工具似乎都可能拥有此功能，但也做了20倍的其他事情，因此它们似乎不是最适合该任务的工具。

对我而言，这唯一缺少的就是前缀相对路径的能力。我正在与modest的开发者交谈，后者正在变得更好。

更新：有一个grunt-includes-replace几乎同样简单且可以添加前缀相对路径。即：它允许您传递变量。

- Daniel Kaplan

---

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

Answer 2

我一直在使用Grunt插件Assemble，取得了一些成功。我刚开始使用时制作了一些视频：

http://www.youtube.com/watch?v=oRwL5Y7K0CM (5:43)

http://www.youtube.com/watch?v=R9Jj9ciA2wM (16:44)

以下是官方网站：

https://github.com/assemble/assemble

你可以从该网站了解到如何使用partials；例如：

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

对我来说，它运行良好。它需要一点学习曲线，文档随着他们继续努力可能会有所改进。

- Rob

Answer 3

我使用https://npmjs.org/package/grunt-dust来预编译带有部分的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'
                    }   
                }   

            }   
        }   
    },

这将把所有编译后的 Dust 模板放在 views/index.js 中。

更多示例和更详细的文档请参见 https://github.com/vtsvang/grunt-dust

- jamie young