在使用 Grunt 编译 Sass 时，我经常看到一个 src 和 dist 文件夹。未编译的文件的文件夹应该放在哪里？答案

【问题标题】：When using Grunt to compile Sass I often see a src and dist folder. Where should folders of files that are not compiled go?在使用 Grunt 编译 Sass 时，我经常看到一个 src 和 dist 文件夹。未编译的文件的文件夹应该放在哪里？
【发布时间】：2017-06-12 06:31:53
【问题描述】：

对于使用 Grunt/Gulp 的 node.js 项目，通常会看到 src 和 dist 文件夹。但是假设您正在构建一个静态站点并拥有其他非编译文件（如字体和 pdf）的文件夹。这些在 dist 里面吗？

这样您就可以上传一个目录并拥有所有生产资产。谢谢你的帮助。

【问题讨论】：

标签： node.js gruntjs workflow frontend

【解决方案1】：

简而言之，您的问题没有真正正确或错误的答案。

FWIW - 我总是将字体和 pdf 存储在 src 文件夹中，并最终在我的 build 过程中将它们复制到 dist 文件夹中。正如您已经提到的那样，这样做的好处之一是......

这样您就可以上传一个目录并拥有所有生产资产。

将这些资产从 src 复制到 dist 文件夹的另一个正当理由是，我通常将 relative paths 定义为源代码中的其他资产。例如。

html

<img src="./images/icons/logo.gif" alt="logo">

css

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato/Lato-Regular.eot');
    src: url('../fonts/Lato/Lato-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Lato/Lato-Regular.woff') format('woff'),
    url('../fonts/Lato/Lato-Regular.ttf') format('truetype'); 
    font-style: normal;
    ...
}

通过复制所有引用的资产并将 src 目录的必要子文件夹复制到 dist 文件夹，它避免了在可分发代码中重新定义资产路径的需要。

以上面显示的@font-face 为例。如果 fonts 文件夹和字体文件未复制到 dist 文件夹，则导致必须在可分发的 .css 代码中重新定义 url。 （新的“相对”或新的“绝对”路径）。

虽然有可以替换路径引用的构建工具，但我喜欢将 dist 文件夹视为一个工作包，其中包含独立于 src 文件夹的所有必要资产.

同样，没有正确或错误的答案。考虑将资产 （pdf 和字体） 复制到 dist 文件夹的利弊，然后选择最适合您的工作流程和/或业务要求的方法。 p>

【讨论】：

嗨@RobC 感谢您分享您的工作流程。我还看到一些带有“src”文件夹的项目和一些没有它的项目。我正在尝试教初学者如何遵循最佳实践，因此我很欣赏您的观点。
您能解释一下 ./images 前面的点的作用吗？我见过 ../ 和 ~/ 但不是那个。
./images 表示当前目录下的images文件夹。 IE。 images 文件夹与引用它的.html 文件位于同一文件夹中。更多信息here。
谢谢。今天学到了一些新东西:)