PHP 项目的 Gulp/Grunt 文件夹结构和实践答案

【问题标题】：Gulp/Grunt folder Structure and Practices for PHP ProjectsPHP 项目的 Gulp/Grunt 文件夹结构和实践
【发布时间】：2014-11-04 14:52:04
【问题描述】：

我正在学习 Gulp，我想知道如何在典型项目中使用它我有一个 Laravel 项目，其中有一个公用文件夹，其中有一个 /js 文件夹，其中包含我所有的 javascript 文件..

现在对于实时服务器，我想缩小它们，我已经 gulp-minify 工作，但是你如何安排文件夹结构？有什么好的做法可以做到这一点吗？

方法一：将所有javascript文件合并为一个

所以想法是将所有 javascript 文件合并到 1 个 javascript 文件中并包含它。

我的问题是：我有很多特定于页面的 javascript，就像我的主页有一个滑块，它依赖于具有 ID 的某个 div，但在其他页面上，该元素不存在，所以使 javascript 工作所需的元素不存在，并且该页面不需要代码？

我对你的想法很感兴趣！

【问题讨论】：

【解决方案1】：

你应该做的不仅仅是缩小文件。您可以使用 concat 合并所有 js 文件。通常最好加载单个文件而不是 10 个小文件。

我的建议是缩小和连接 js 中的所有文件并升级 - 就在您的公共场所。

【讨论】：

嗯，我有很多特定于页面的 .js 文件，就像一个页面有一个 ajax 更新脚本，但另一个页面不需要那 50 行代码。当页面上没有某些元素的情况下也执行代码时，此方法不会引发错误
@Notflip：是的，它会的。我的理解是，当您使用框架或者您的 JavaScript 是模块化的时，这种方法效果最好。例如，在使用 Backbone 时，您可能会将所有视图文件连接到一个文件中。在您的“登录”页面上，您只需在模板中包含 new LoginView({ el: element }); 即可实例化视图。
感谢您的回答，也许我应该在问题中包括这主要是针对 php 项目（使用 laravel）
@Notflip：没问题。我应该指出，您不受任何方法的束缚——您可以将模块化/面向框架的 JS 与在服务器上呈现模板的“传统”Web 框架（如 Laravel）结合起来。
这是大搜索哈哈。因为我知道 laravel 有一个复杂的文件夹结构，所以我不想用我的前端预处理器让它变得更复杂。但我真的很想开始使用 gulp 或 grunt :)

【解决方案2】：

有几种不同的方法。

一种方法是在您的/js 文件夹中拥有单独的/src（用于源文件）和/build（用于缩小文件）文件夹。另一种方法是将.min 附加到缩小的文件中，并将它们与源文件一起保存。这些方法的一个潜在缺点是您必须更新模板中对 JavaScript 文件的所有引用。

Lukasz 的方法可能是我推荐的方法，因为它需要的工作最少。最终，这取决于您和您的个人喜好。

【讨论】：

关于 node_module 文件夹的信息。我最近从 gulp 和 bower 开始。一切都很好，但是在本地版本和实时版本上处理我的网站的文件夹结构时，几乎没有什么混乱。混乱的是 node_module 文件夹。希望你能理解。

【解决方案3】：

对于页面特定的 javascript，您可以使用 gulp-htmlmin：它是为 html 缩小而生的，但它也可以最小化您在后台调用 uglify 的内联 javascript。

【讨论】：