Question

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

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

是否有任何静态HTML模板语言与Grunt / Gulp支持不会偏离常规HTML，并且仍处于活动状态？

Answer 1

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

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

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

Answer 2

我一直在用grunt插件组装成功。我第一次使用它时做了几个视频：

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

或者对于更细粒度的控制，您可以执行汇编目标的任务，如：

grunt assemble:your_target

这对我很有用。它确实需要一些学习曲线，文档可能会随着它们继续工作而改进。

Answer 3

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

还有更多示例和更详细的文档

使用Grunt.js对partials进行静态HTML编译

3 个答案: