Grunt 预编译内联降价答案

【问题标题】：Grunt pre-compile inline markdownGrunt 预编译内联降价
【发布时间】：2013-11-08 20:07:19
【问题描述】：

我一直在寻找一种使用 grunt 预编译内联 markdown 的方法。我选择 Markdown 是因为，我正在处理大量具有简单格式的纯文本，但我不会完全反对 JSON（或类似的）。

这是一个例子：我在寻找什么：

<body>

    <div id="content">
        <div class="text">
            ## Markdown Headline
            markdown Paragraph 1
        </div>
        <div class="text">
            ## Markdown Headline
            Markdown Paragraph 2
        </div>
    </div>

</body>

更好的是：

<body>

    <div id="content">
        <div class="text">
            {include: /path/to/markdown_file_1.md:block_1}
        </div>
        <div class="text">
            {include: /path/to/markdown_file_1.md:block_2}
        </div>
    </div>

</body>

我不希望从 Markdown 创建模板，只是一种包含文本的方式，然后使用“grunt build”（或者在 yeoman 的情况下，也用于“grunt server”）渲染/编译为 html。

意思是上面的例子会编译成...

<body>

    <div id="content">
        <div class="text">
            <h1>Markdown Headline</h1></p>
            Lorem ipsum <b>dolar</b> set <a href="http://amet.com/">amet</a>.
        </div>
        <div class="text">
            <h1>Markdown Headline</h1></p>
            Integer <i>posuere erat a ante</i> venenatis dapibus posuere velit aliquet.
        </div>
    </div>

</body>

每个 html 页面都会有所不同，因此无法使用模板，并且由于我正在接收副本（作为降价文件），我认为如果我可以在 html 中“包含”降价并让 grunt 为我编译它会很棒.

我查看了 stackoverflow 的解决方案，但一无所获（也许，我搜索错了）

我还研究了以下内容：

github.com/evilstreak/markdown-js - 关闭，但似乎“即时”工作，这对我来说是不必要的。
github.com/chjj/marked - 同上
github.com/treasonx/grunt-markdown - 似乎只将markdown 文件编译成html 文件
assemble.io/docs/Markdown.html - 我真的很希望组装，但不知道如何实现它
github.com/wycats/handlebars.js - Handlebars 正是我希望能够包含 markdown 的方式，但我如何才能在 HTML 文件中读取 handlebars 并使用 grunt 渲染（预编译）它。

【问题讨论】：

github.com/treasonx/grunt-markdown ??

标签： html gruntjs markdown yeoman assemble

【解决方案1】：

Assemble 非常棒。

使用 HTML 内联编写 markdown，或者在 Grunt 配置中指定您想要的任何 markdown，Assemble 将使用它。使用以下帮助器将内联或外部 Markdown 转换为 HTML：

{{md}} 助手

这个助手会将markdown文件视为包含，并将markdown转换为HTML：

{{md "path/to/file.md"}}

{{markdown}} 块助手

这是一个块帮助器，使您可以使用 HTML 内联编写 Markdown：

{{#markdown}}
# Foo
> This is markdown
{{/markdown}}

这种方法的美妙之处在于，您可以同时编写 HTML 和 markdown，或者只需编写 markdown，它就可以工作。

这是我构建新博客的方式：

blog: {
  options: {
    layout: 'templates/layouts/default.hbs'
  },
  files: {
    '<%= site.dest %>/': ['content/*.md']
  }
}

我的布局，default.hbs，看起来像这样：

<html lang="en">
  <head>
    {{> head }}
  </head>
  <body>
    {{> nav-main }}
    <div class="container">
    {{#markdown}}
      {{> body }}
    {{/markdown}}
    </div>
    {{> footer }}
  </body>
</html>

【讨论】：

感谢 Jon 的详尽回答。发布我的问题后，我意识到我让自己太难了。然后我实施了一个类似于你建议的解决方案。我只是为每个不同的 HTML 页面创建一个不同的车把模板，这个系统就像一个梦一样工作，向 Assemble.io 的人致敬。

【解决方案2】：

使用 grunt-markdown 的组合（根据 Simon 的评论）呈现 Markdown 和 grunt-import 将其注入到您的构建中。一个示例配置（未经测试，因此您可能需要尝试一下）：

module.exports = function(grunt) {
    grunt.initConfig({
        markdown: {
            build: {
                files: [{
                    expand: true,
                    src: 'path/to/markdown/**/*.md',
                    dest: 'path/to/build/',
                    ext: '.html'
                }]
            }
        },
        import: {
            build: {
                src: 'path/to/build/**/*.html',
                dest: 'path/to/build/'
            }
        }
    });
    grunt.registerTask('build', ['markdown', 'import']);
}

导入任务在您的源文件中获取一个字符串，例如@import "path/to/another/file";，并将该文件的内容注入到目标文件中。

【讨论】：

感谢您的快速回复。然而，这并不是我想要的，但它让我回到了 Assemble.io。我正在制作一个快速原型。一旦我启动并运行它，我会在此处发布结果。