我一直在寻找一种很好的方式来组织我的网站，我找到了Grunt，npm，Gulp以及其他一些很棒的东西。我正在寻找能够通过HTML，CSS和JavaScript模块组织网页的东西，或者通过我之前列出的方法来实现这一点。例如：
+-- files
| +-- html
| | +-- header.html
| | +-- footer.html
| | +-- content.html
| +-------
|
| +-- styles
| | +-- stylesheet.scss
| | +-- fonts.css
| +---------
|
| +-- scripts
| | +-- base.js
| | +-- jquery.min.js
| | +-- bootstrap.min.js
| +----------
+-------------
然后（魔术工具）会将javascript文件神奇地合并到一个文件中，将样式合并到一个文件中，并将HTML组件合并到一个文件中。
TL; DR：组织我的文件变得越来越复杂，需要组织文件的神奇方式，否则项目会剧烈爆炸。
干杯，
一个非常混乱的船长Crunch
答案 0 :(得分：2)
你提到的 Grunt，npm，Gulp 这样的工具是构建工具......我使用这个名为 webpack 的工具将我所有的css和js文件捆绑到一个大js文件并缩小它... Find Link to webpack css bundler here
你使用什么样的语言：静态HTML？ jQuery的？角？何反应？
文件结构将根据您使用的语言而有所不同。
对于静态html网页，您可以使用index.html并提供指向其他网页的链接。 Refer this stackoverflow answer for simple website struture
但是，在使用Angular和React等框架/库进行开发时，会有高级文件结构...所以取决于您正在开发的内容。
答案 1 :(得分：1)
我认为这是一个非常有组织的设计。您可以在IDE上使用漂亮的设计，但无法保证魔术工具将生成不会泄漏的CSS或没有全局命名空间污染的Javascript。
如果你想做得更好，你可能会考虑使用带有Shadow DOM的Web组件（如果需要，可以使用polyfill），并且还要在运行时组织代码。 Shadow DOM几乎是IFrame的轻量级替代品。你可以认为IFrame就像传统的虚拟机（如Virtual Box，VMWare）等，而Shadow DOM就像Docker和BSD jails。
如果您不熟悉Javascript，我建议您不要使用魔术工具，因为他们有自己的学习曲线，可能会让您感到困惑，而不是帮助您。
如果您希望摆脱所有前端复杂性但仍想要单页应用程序的大多数好处，您可能需要考虑使用TurboLink（https://github.com/turbolinks/turbolinks）或HTML-5历史API等技术（用于处理路径） ）使用服务器端呈现并传递特殊的HTTP令牌以从服务器端获取预呈现的内容。
免责声明：我提到的最后一种方法不一定是最好的方法，如果前端有很多活动部件，但如果它适合您的使用案例，它可以显着降低复杂性并帮助您组织起来。
我强烈建议您使用Profilers，测量不同的方法并找出最大的收益。一种尺寸并不适合所有人。