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

时间:2014-06-29 18:29:53

标签: php gruntjs composer-php bower gulp

经过多年的贫困 - 平庸的PHP开发人员,我决定开始我的游戏并学习更多关于开发Web应用程序的现代工作流程和最佳实践。

我研究过任务运行器,依赖管理器,git和云服务器。我主要在PC上工作,我决定与

达成和解
  • 用于前端工作的PHP和Bootstrap 3
  • MYSQL(NoSQL似乎对我需要的东西有点过分)
  • 使用git进行存储库控制的云托管AppFog
  • 用于任务自动化的gulp.js - 它似乎比PHP项目的grunt简单得多
  • 用于依赖管理的凉亭或作曲家(仍然无法决定)

我在这里使用了一些答案来弄清楚如何更改位置凉亭,例如,放置它下载的文件但是我很难理解当你使用依赖管理器时最好的做法是什么(似乎下载一个完整的git repo)和一个任务运行器。

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

这是处理此问题的最佳做法,还是我在错误的球场。我是否应该使用具有依赖关系管理器的任务运行器?

2 个答案:

答案 0 :(得分:1)

看看Gulp中的globbing。你应该能够分别使用gulp.src('src/vendor/**/*.css')gulp.src('src/vendor/**/*.js')来挑选你的CSS和JS。

或者,快速搜索NPM会返回一些可能有用的内容:https://www.npmjs.org/package/gulp-bower-files/

答案 1 :(得分:1)

好的,首先关闭蝙蝠 - 让我们谈谈作曲家和凉亭。它不是真正的一种或另一种 - 它更多的是你将它们一起使用。您可以使用composer来管理您的PHP依赖项(例如Guzzle HTTP Client)和bower来管理您的客户端依赖项,例如jQuery bootstrapa sass mixin library like bourbon或类似{{ 3}}

就凉亭依赖关系和牵引这些依赖关系而言,一种方法是将Font AwesomeGulp结合使用。这将读取您的bower.json文件,并根据该文件将bower依赖项拉入您的脚本。如果某些bower依赖项在main中没有bower.json属性(有些没有),那么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"
      ]
    }
  }
}

正如您可能已经注意到的那样,您也可以在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"}));
});

如果您有兴趣,我有一个包含所有这些设置的完整项目Main Bower Files