自动将资产包含到模板中答案

【问题标题】：Automatically include assets into template自动将资产包含到模板中
【发布时间】：2014-05-15 17:08:53
【问题描述】：

我将 linkedIn fork of Dust 与 Node.JS 和 Express 一起使用。

我的模板层次结构有：

1 个布局模板 - 基本模板
1 页面模板 - 这是将要呈现的模板
部分的可选数量 - 可能包含在页面模板中

layout.dust （布局模板）：

<html>
    <head>
        <script src="/js/layout.js"></script>
        <link rel="stylesheet" href="/css/layout.css">

        <script src="/js/home.js"></script>
        <link rel="stylesheet" href="/css/home.css">

        <script src="/js/sidebar.js"></script>
        <link rel="stylesheet" href="/css/sidebar.css">

        <script src="/js/widget.js"></script>
        <link rel="stylesheet" href="/css/widget.css">
    </head>
    <body>
        {+content}{/content}
    </body>
</html>

home.dust （页面模板）：

{>layout/}
{<content}
    <div>
        {>sidebar/}
    </div>
    <div>
        {>widget/}
    </div>
{/content}

当用户访问网站主页时，home.dust 将被渲染，用户将看到一个带有侧边栏和一些小部件的页面。 sidebar.dust 和 widget.dust 的内容无关。

正如您在 layout.dust 中所见，head 部分中包含 4 组 JavaScript 和 CSS，模板和部分各一组。我的问题是找到一种将每个资产自动包含到布局中的方法（无需硬编码）。理想情况下，我希望能够做到这一点：

{#scripts}
    <script src="{.}"></script>
{/scripts}

不同的页面可能需要不同的资源。

如何将每个脚本源路径推送到 layout.dust 的上下文中？
其他开发人员是做什么的，他们只是硬编码吗？

【问题讨论】：

标签： node.js dust.js

【解决方案1】：

我会将所有脚本添加到布局的头部，而不会从从该布局扩展的页面中推送任何脚本。我不确定您对 javascript minification 的了解程度，但通常的做法是将所有（或大部分）javascript 资产捆绑到一个文件中，并通过单个 HTTP 请求将它们提供给用户。这大大加快了您的页面速度；查看 Google 对此有何评论here。

这并不难，因为有一些工具可以自动为您执行此操作。你可以去找资产经理或Grunt。

资产经理：

在 npm 上有一些。我发现一个叫Express Asset Manager，另一个叫Asset Pipeline。

咕噜声：

使用contrib-uglify 和contrib-concat 处理你的缩小。还有很多其他你应该觉得有用的。您也可以对所有 CSS 执行完全相同的操作。

显然，在开发过程中，您并不想尝试调试缩小的代码，因此您可以执行以下操作：

{?production}
    <script src="production-minified-script.js"></script>
{:else}
    {#scripts}
        <script src="{.}"></script>
    {/scripts}
{/production}

其中production 是从process.env.NODE_ENV 传递给您的模板的变量。为避免在每个脚本中手动添加，您可以将它们作为数组传递给

仍想从其他页面添加？

如果您仍想从其他页面添加，请在您的主要脚本下方添加一个块，例如：

{+otherScripts}{/otherScripts}

【讨论】：

为了缩小和连接，我基于 uglify-js 和 clean-css 构建了自己的自定义框架。该框架允许我在单个 HTTP 消息中动态连接多个脚本，我的真实脚本标签看起来更像这样：<script src="/js/layout.js;/js/home.js;/js/sidebar.js"></script>
我不确定添加像 {+otherScripts}{/otherScripts} 这样的块有什么帮助，我仍然不确定如何将 URL 推送到上下文中。这里包含多个部分，每个部分都需要将自己的脚本添加到上下文中。