建立一个好的前端架构是开始开发web应用程序或网站的基本步骤。好的实践和编码约定是必不可少的，但是结构呢?我们怎样才能构思出一种及时可维护的良好架构?但最重要的是，我们应该从哪里开始?
当我开始思考这个问题的时候，我意识到我需要一些东西:
- 我想要一个多页面项目(一个web应用程序或网站)。
- 我希望我的项目能够支持不同的屏幕大小和分辨率，换句话说，我希望它是响应式的。
- 我希望最终产品是可维护的。
- 我想要最后的产品是高性能的。
- 我希望在将来的项目中重用相同的模板。
选择合适的工具
现在我们有很多很酷的工具可以帮助我们在现代前端开发工作流。因此，在面对第1和第2点时，我告诉自己，我需要一个基于断点的CSS架构，它可以帮助我支持不同的设备和桌面大小。另一方面，我也知道如此大量的CSS和文件可能有点混乱(与第3点不兼容)，这就是为什么我决定开始使用CSS预处理器(在我的例子中是带有Compass的Sass)。
那么点4呢?答案很简单:我决定使用Gruntjs。最后，点5呢?即使在这种情况下，答案就是: Yeoman，我认为最好的解决方案。
组织工作流
每个前端项目总是包括库、jQuery插件和许多JavaScript和CSS文件(在本例中是SCSS文件)，以达到不同的目标。混合所有这些元素意味着需要使用不同的技术，并且，将它们组合在一起意味着需要建立一个好的前端工作流。我们会发现自己不得不管理一个涉及不同技术的庞大工作流程。这就是为什么要把所有的东西都组织在文件夹里，遵循一种模式或惯例，以保持事物的清晰和整洁，这是非常重要的。
我们可以选择将所有基本的前端组件拆分为宏组，例如:
我们能把它们分成更小的组吗？当然！我们可以:
- SCSS
- variables
- mixins
- common parts to every layout
- single layouts
- js
- libraries (such as jquery, angularjs, gAnalytics and so on…)
- plugins (typically jquery plugins)
- controllers (I mean controllers such as angularjs controllers)
在基于模板的体系结构中(例如使用 blade.php 或 nodejs 的 pug )， 我们也可以拆分视图如下:
- views
- common parts to every view（公共视图）
- single views（单视图）
但是我在本文中没有讨论这种有公共视图的情况，因为我假设在我的项目中，每个页面或布局只有一个视图(一个HTML文件)。
从以上所有这些初步考量为基准，这就是我决定组织架构的方式，以下是我的文件夹树:
project
\css
\imgs
\js
\controllers
pageOne.js
pageTwo.js
\libs
angular.js
jquery.js
analytics.js
\plugins
jquery.tooltip.js
textResize.js
formValidation.js
\views
pageOne.js
pageTwo.js
\scss
\framework
_core.scss
_forms.scss
_input.scss
_mixins.scss
_variables.scss
\layouts
_all.scss
_phablets.scss
_tablets.scss
_desktop.scss
_desktop-large.scss
_retina.scss
\pageOne
_all.scss
_phablets.scss
_tablets.scss
_desktop.scss
_desktop-large.scss
_retina.scss
\pageTwo
_all.scss
_phablets.scss
_tablets.scss
_desktop.scss
_desktop-large.scss
_retina.scss
\libs
_animate.scss
_normalize.scss
_reset.scss
\plugins
_jquery.tooltip.scss
_jquery.fancyInput.scss
目录解构说明
imgs
我决定把所有的图像文件都放在这里:.png， .jpg， .jpeg，壁纸等等。
Examples： icon.png, home-background.jpeg, userAvatar.jpg
js (mainfolder)
我决定把所有的.js文件放在这里，在子文件夹中组织如下:
js\controllers
这是 angular controllers 的文件夹，每个都有对应到 view 的名称。例如，如果你的 home.html 需要一个 angular controller，你应该创建一个这样的文件: project\js\controllers\home.js 。
Examples：Examples: home.js, user-registration.js, user-login.js
js\libs
我为javascript库创建了这个文件夹。当我说库的时候，我指的不是插件，这就是为什么我决定区分第一个（libs）和第二个(plugins)，创建两个不同的文件夹。
Examples: jquery-latest.js, angular.js, googleAnalytics.js
js\plugins
插件往往需要依赖于库才能工作，而库则不需要。这就是为什么我创建了一个不同的文件夹。
Examples: jquery-fancyInput.js, restangular.js, customPlugin.js, jquery-airport.js
js\views
我为所有的为了表现性的东西创建了这个文件夹。每个文件必须具有对应视图的相同名称。比如你的 home.html 需要一些效果和插件初始化，你应该创建一个这样的文件: project\js\views\home.js ，它有自己的 document ready 。
Examples: home-animations.js, user-registration.js,user-login.js, site-animations.js
css
这个文件夹包含所有从 scss 生成的 css 文件，比如说 home.scss 将会在这个文件夹中生成 home.css 文件。
css\libs
即使是CSS文件，我也区分了库和插件。下面是一些CSS库示例。
Examples: _meyers-reset.scss, _normalize.scss,_animate.scss, _960gridSystem.scss
css\plugins
该文件夹中包含的CSS文件是使JavaScript插件工作的必要样式。
Examples: _jquery-fancyInput.scss, _jqueryTooltip.scss
css\framework
我希望将这些scss文件中的样式作为全局样式，共享到给整个项目全部页面。
framework 子目录的会像下面这样组织：
- __variables.scss_ (项目变量声明：颜色、间距等等)
- __mixins.scss_ (项目mixin声明：排版、clearfix、动画等等)
- __forms.scss_ (定制表单样式 & 重置)
- __input.scss_ (自定义输入样式 & 重置)
css\layouts
这是响应部分。按照移动优先原则，该目录中的文件以这种方式组织，它们覆盖所有屏幕分辨率。因此，您应该开始使用 __all.scss_ 文件声明自己的样式。该文件中声明的规则适用于所有屏幕大小和所有视图。如果你想让你的网站有适应性，而不是仅仅重写规则，并声明它们为任何其他屏幕分辨率。
该文件夹组织如下:
- phablets(481up) __phablets.scss_
- tablets and small laptops(768up) __tablets.scss_
- desktops(1030up) __desktop.scss_
- desktops with large screens (1204up) __desktop-large.scss_
- retina displays exceptions (@2x) __retina.scss_
这些文件将处理各式各样的设备尺寸下的页面布局，这要感谢CSS3的媒介查询新特性。
注意：这些文件在所有视图(HTML页面)中共享。这就是为什么您需要在 scss\layout 下创建一个新的文件夹，以便将特定的样式提供给特定的页面。
举个例子，如果您想设计一个响应式的 home 页面和一个响应式的 user-login 页面，可以这样：
1、 在 scss\layouts 下创建一个新的文件夹，并让该文件夹的名称与您想要进行自适应的视图具有相同的名称（比如：home 和 userLogin），所以最终的文件夹路径应该是：scss\layout\home 和 scss\layout\userLogin 。
2、 将上面列出的相同文件放入这些文件夹中: _all.scss_ , __phablets.scss , _tablets.scss_ , __desktops.scss , _desktop-large.scss_ 和 __retina.scss 。
综上所述
综上所述只需一个Yeoman生成器，用来搭建一个响应性的多页面web应用程序或网站。我还决定将一些Grunt任务包括在缩小、混淆和Sass编译上。您可以在这里查看 github.com/mcarella/wo… ，或者直接从NPM下载它: www.npmjs.org/package/gen… 。
我知道这不是一个通用的解决方案，也许你觉得它看起来有一些冗余，我知道它不适合所有情况，但我认为这是一个很好的起点。你可以用不同的方式添加你想要或组织你的scss的繁重任务，使它变得更轻或更胖。无论您的目标是什么，我通常建议人们根据自己的需要来构建自己的架构或框架，特别注意性能和可维护性，而不会忽略用户体验。
点击咨询 