如何使用 Gulp 高效管理和处理 Bower 包？ （VS2015，Visual Studio 2015）

Question

背景：

Visual Studio 2015 引入了 Gulp 和 Bower 用于客户端包管理。 .Net 以前有一个非常有效的方法 bundling / minification and package management，但由于未指明的原因，它已在 ASP.Net 5 / MVC 6 中删除，建议改用 Gulp 和 Bower。

我有一些我希望在我的项目中使用的供应商文件，包括 jquery.appear、isotope、owl-carousel 等；有些是简单的 JavaScript 文件，有些是 CSS，还有一些是字体、图像等资产。

场景：

目前我正在评估如何最好地利用 Bower 来管理包的版本，同时使用 Gulp 从 bower_components 中仅提取必要的文件，并将它们 uglify / minify / concat 到包中。

我目前正在使用 CDN 可用版本的脚本，但最佳做法是建议我将故障转移到本地副本 - 如果我可以找到一种使用 Bower / Gulp 管理它们的方法 或者只需在本地下载它们，然后放弃包管理。

包管理是我的首选方法，但如果这在脚本、配置、覆盖等方面需要高度维护，则不是。

我尝试过的：

我查看了 Gulp 包，例如 bower-main-files、gulp-bower-src（显然已被 Gulp 列入黑名单），我目前正在使用 gulp-concat-vendor；有了这个，我可以处理只包含单个 JavaScript 文件的基本包（即不是 CSS，不是图像等相关资产）。

问题：

一些 Bower 包不包含用于导出其主文件的正确信息（有些根本没有主声明）。

一些包将依赖项下载到顶层的 bower_components 中，这会变得杂乱无章，我不需要的文件（我只想要主要（核心）导出的文件，并且依赖项通常已经在其他地方遇到过）。这些额外的包需要更多的配置才能将它们排除在“Bower 主文件”的一部分处理之外。

一般来说，Bower 的“标准”是松散的，即使是流行的软件包也不遵守。

在连接过程中，有时需要达到特定的顺序。我一直无法找到一种优雅的方式来自动执行此操作 - 我创建了一系列源文件，但这并不理想，因为它需要手动检查和编辑每个包，这主要否定了包管理的整个概念。

问题：

1. 有经验的前端开发人员会尝试采用与我尝试相同的方法（使用 bower_components 作为源），还是只是从 GitHub 手动复制所需的文件？

2. 如果您确实使用 bower-components，能否请您概述一下 Gulp 的工作流程，以及您使用哪些插件仅过滤掉您需要的文件。

3. 是否可以首先防止 Bower 下载不需要的依赖项、测试等？

4. 在处理包含相对引用的文件时（例如，包含对图像的引用的 CSS），是否可以将相对路径更正为相对于此类资产的指定输出目录？

Answer 1

1. 是的。

2. 见下文。

3. 嗯，bower 包就是包，你会得到包含的内容。对于您的构建，您要么依赖指定主文件的组件 bower.json，要么自己进行过滤。很简单。

您可以使用 filter = require('gulp-filter') 来过滤这样的文件：

var gulp = require('gulp'),
    bower = require('gulp-main-bower-files'),
    filter = require('gulp-filter'),
    concat = require('gulp-concat'),
    rename = require('gulp-rename'),
    srcmaps = require('gulp-sourcemaps'),
    jsminify = require('gulp-uglify')
    cssminify = require('gulp-csso'),
    del = require('del');

var src = {
    js: 'app/**/*.js',
    css: 'app/**/*.css',
    content: ['app/**/*.jpg', 'app/**/*.svg', 'app/**/*.png', 'app/**/*.ico', 'app/**/*.html']
}

var dst = {
    pub: 'pub/',
    lib: 'pub/lib/'
}

gulp.task('bower', ['start-build'], function () {
    var jsfilter = filter('**/*.js')
    var cssfilter = filter('**/*.css')
    return gulp.src('bower.json')
        .pipe(bower())
    .pipe(jsfilter)
    .pipe(concat('lib.min.js'))
        .pipe(jsminify())
    .pipe(gulp.dest(dst.lib))
    .pipe(jsfilter.restore())
    .pipe(cssfilter)
    .pipe(concat('lib.min.css'))
        .pipe(cssminify())
    .pipe(gulp.dest(dst.lib))
    .pipe(cssfilter.restore())
    .pipe(rename(function (path) {
        if (~path.dirname.indexOf('fonts')) {
            path.dirname = '/fonts'
        }
    }))
    .pipe(gulp.dest(dst.lib));
})

gulp.task('js', ['start-build'], function () {
    return gulp.src([src.js])
        .pipe(srcmaps.init())
        .pipe(concat('app.min.js'))
        .pipe(jsminify())
        .pipe(srcmaps.write())
        .pipe(gulp.dest(dst.pub));
})