php - 如何使用像 gulp.js 这样的构建系统和像 Bower 这样的依赖管理器

Question

在经历了多年的贫穷 - 平庸的 PHP 开发人员之后，我决定提高自己的水平，并更多地了解现代工作流程和开发 Web 应用程序的最佳实践。

我研究了任务运行器、依赖管理器、git 和云服务器。我主要在电脑上工作，我决定使用

• 用于前端工作的 PHP 和 Bootstrap 3
• MYSQL(NoSQL 对于我的需求来说似乎有点过分)
• AppFog 用于云托管，并使用 git 进行存储库控制
• 用于任务自动化的 gulp.js - 它似乎比 PHP 项目的 grunt 简单得多
• 使用 Bower 还是 Composer 进行依赖管理(仍无法决定)

我使用了这里的一些答案来找出如何更改位置 bower ，例如，放置它下载的文件，但我很难理解当您使用依赖项管理器时的最佳实践是什么(这似乎下载整个 git 存储库)和任务运行程序。

例如，我可以告诉 Bower 将 jquery 或 bootstrap 下载到 src/vendor 文件夹中，但下载的是 javascript、css 和其他文件的混合体。我可以将它们留在那里并在我的代码中引用它们，但运行 gulp 过程将涉及挑选单个文件并逐个最小化或连接，避免文件夹中我不需要的所有其他内容。

这是处理这个问题的最佳实践还是我走错了地方。我是否应该使用带有依赖管理器的任务运行器？

Answer 1

好吧，首先 - 我们来谈谈 Composer 和 bower 。这并不是真正的一种或另一种东西——更多的是你将它们一起使用。您可以使用 Composer 来管理您的 PHP 依赖项(例如 Guzzle HTTP Client )，并使用 Bower 来管理您的客户端依赖项，例如 jQuery 。 bootstrap , a sass mixin library like bourbon或者类似 Font Awesome

就 Bower 依赖项和引入这些依赖项而言，一种方法是使用 Gulp与 Main Bower Files 结合使用。这会读取您的 Bower.json 文件并根据该文件将 Bower 依赖项拉入您的脚本中。如果某些 Bower 依赖项在 bower.json 中没有 main 属性(有些则没有)，则 bower-main-files 获胜默认情况下不会选择它们...但是 - 您可以通过在您自己的 bower.json 文件中提供覆盖来解决此问题，如下所示:

{
  "name": "My Project",
  "version": "1.0.0",
  "dependencies": {
    "autogrow": "https://github.com/ultimatedelman/autogrow.git#master",
    "jquery": "1.12.2",
    "jquery-slimscroll": "^1.3.7"
  },
  "overrides": {
    "jquery-slimscroll": {
      "main": [
        "./jquery.slimscroll.js"
      ]
    }
  }
}

您可能已经注意到，您也可以将 Bower 指向 github 存储库和分支。

然后，您可以在 gulp 任务中使用实际的 main-bower-files 包本身，如下所示:

var gulp = require("gulp"),
    reload = require("browser-sync").reload,
    mainBowerFiles = require("main-bower-files")
    $ = require("gulp-load-plugins")({
        camelize: true
    });
gulp.task("vendorScripts", function() {
    return gulp.src(mainBowerFiles({filter: '*.js'}))
        .pipe($.plumber({
            errorHandler: c.onError
        }))
        .pipe($.concat(c.concatVendorCSSFile))
        .pipe(gulp.dest('assets/styles'))
        .pipe(reload({stream: true, once: true}))
        .pipe($.size({title: "vendorScripts"}));
});

如果您有兴趣，我有一个包含所有这些设置的完整项目 here