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、同位素、owl-carousel 等；有些是简单的 JavaScript 文件，有些有 CSS，还有一些有字体、图像等资产。

场景：

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

我目前正在使用 CDN 可用版本的脚本，但最佳实践建议我实施故障转移到本地副本 - IF 我可以找到一种使用 Bower 管理它们的方法/ Gulp 或直接下载到本地，放弃包管理。

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

我试过的：

我看过 Gulp 个软件包，例如 bower-main-files, gulp-bower-src (which apparently is blacklisted by Gulp), and I am currently using gulp-concat-vendor；有了这个我可以处理只包含单个 JavaScript 文件的基本包（即不是 CSS，不是图像等相关资产）。

问题：

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

一些包将依赖项下载到顶层的 bower_components 中，其中包含我不需要的文件（我只想要主要（核心）导出文件，并且通常已经满足依赖项）别处）。这些额外的包需要更多配置才能将它们排除在 'Bower Main Files'.

的一部分之外。

一般来说，Bower 'standards' 是松散的，没有人遵守，即使是流行的软件包也是如此。

串联时，有时需要达到特定的顺序。我一直无法找到一种优雅的方式来自动执行此操作——我创建了一组源文件，但这并不理想，因为它需要手动检查和编辑每个包，这在很大程度上否定了包管理的整个概念。

问题：

有经验的前端开发人员是否尝试采用与我尝试相同的方法（使用 bower_components 作为源），或者只是手动从 GitHub 复制所需的文件?
如果您确实使用了 bower-components，请您概述一下 Gulp 的工作流程，以及您使用什么插件来仅过滤出您需要的文件。
是否可以防止 Bower 首先下载不需要的 dependencies、tests 等?
处理包含相对引用的文件时（例如CSS包含对图像的引用），是否可以更正相对路径，使其相对于指定的输出目录这样的资产？

Answer 1

是。
见下文。
好吧，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));
})

Gulp如何高效管理和处理Bower包？ (VS2015, Visual Studio 2015)

How to efficiently manage and process Bower packages with Gulp? (VS2015, Visual Studio 2015)

asp.net-mvc

bundling-and-minification

bower

gulp

visual-studio-2015