18

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

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

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

4

3 回答 3

16

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

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

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

于 2013-08-30T22:36:26.947 回答
2

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

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

于 2013-08-28T13:57:58.693 回答
0

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

于 2013-09-30T11:50:11.627 回答