Foundation 5 文件结构和 HTML 标记答案

【问题标题】：Foundation 5 file structure and HTML markupFoundation 5 文件结构和 HTML 标记
【发布时间】：2013-12-08 23:30:28
【问题描述】：

我正在尝试将 Foundation 5 与 SASS 一起使用。它带有 bower 和 grunt，但我不知道应该如何使用这些文件。这个问题可能与“最佳实践”有关，但我只需要在这里快速推荐一下。

一个更简单的文件夹树例如..

-css
  -vendor
    -modernizr.css
  -foundation.css
-js
  -vendor
    -jquery.js
  -foundation.js
-img

【问题讨论】：

【解决方案1】：

例如，我添加了一个带有内容的附加 .bowerrc 文件

{"directory" : "Resources/Private/BowerComponents"}

...因为这符合我框架的约定。由此，我只需要相应地调整 config.rb 文件，并给出 sass 提示来找到文件的位置。

您可能还想看看https://github.com/zurb/foundation-compass-template，这是一个您可以开始使用的普通包（但要注意在此状态下处于活动状态的https://github.com/zurb/foundation-compass-template/issues/2）。

【讨论】：

与您的实际问题相关的另一件事：我绝对不会复制文件，因为您失去了bower update 他们的能力。尽可能好地引用它们（例如提到的config.rb）
感谢您的回答。在我查看了一些 Yeoman 生成器之后，我意识到其中许多组件都是为了适应开发或生产目的而进行的。我同意我们应该在开发过程中在 bower_component 中引用它们，以便我们可以bower_update 如您所说。

【解决方案2】：

经过大量研究，我决定看看一些流行的 Yeoman 生成器的作用。

如果我们看一下angular-fullstack generator，例如，有两种状态：“dev”和“dist”（基本上是开发版和生产版）。

在开发过程中，我们可能会使用预编译/预丑化的脚本/样式（例如coffeescript、sass、stylus 等）。但最终，这些将被处理为生产就绪。

在开发过程中，很容易从 bower_components 中引用它们。但是，在开发之后，它们可能最终必须编译到不同的文件夹中。

在这种情况下，我们在 bower_components 中有 Foundation 的 SASS 文件和一些其他必要的脚本。虽然我们可以在 bower_components 文件夹中编译/缩小这些文件，但更好的方法是将这些处理后的源输出到不同的文件夹中。

【讨论】：