Question

我正在使用linkedIn fork of Dust与Node.JS＆amp;表达

我的模板层次结构有：

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 的上下文中？
其他开发人员做了什么，他们只是硬编码吗？

Answer 1

我将所有脚本添加到布局的头部，而不从此布局中扩展的页面中推送任何脚本。我不确定您对javascript缩小的了解程度如何，但通常的做法是将所有（或大部分）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}

自动将资产包含到模板中

1 个答案: