Question

我一直在寻找一种用grunt预编译内联降价的方法。我选择了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服务器”）呈现/编译成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页面都会有所不同，因此模板不可能，因为我收到副本（作为markdown文件），我认为如果我能在html中“包含”markdown并且为我编译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 - 句柄正是我希望能够包含markdown的方式，但我怎样才能在HTML文件中阅读handlebars并将其渲染（pre （编译）与grunt。

Answer 1

Assemble非常棒。

使用HTML内联写入markdown，或者只在Grunt配置中指定所需的任何markdown，Assemble将使用它。使用以下帮助程序将内联或外部降价转换为HTML：

{{md}}助手

此帮助程序将处理包括的markdown文件，并将markdown转换为HTML：

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

{{markdown}}阻止助手

这是一个块帮助程序，使您可以使用HTML内联写入markdown：

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

这种方法的优点在于你可以同时编写HTML和降价，或者只是写降价，它就可以了。

以下是我正在构建新博客的方式：

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>

Answer 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";之类的字符串，并将该文件的内容注入目标文件。

Grunt预编译内联降价

2 个答案:

{{md}}助手

{{markdown}}阻止助手