asp.net-mvc - 如何使用 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，还有一些是诸如字体、图像之类的 Assets 。

场景:

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

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

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

我试过的:

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

问题:

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

一些包将依赖项下载到顶层的 bower_components 中，里面堆满了我不需要的文件(我只想要主(核心)导出的文件，并且依赖项通常已经在其他地方得到满足)。这些额外的包需要更多的配置来排除它们作为“Bower Main Files”的一部分被处理。

一般来说，Bower 的“标准”是松散的，并且不被遵守，即使对于流行的包也是如此。

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

问题:

有经验的前端开发人员是否尝试采用与我尝试相同的方法(使用 bower_components 作为源)，或者只是从 GitHub 手动复制所需的文件？

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

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

在处理包含相对引用的文件(例如，包含对图像的引用的 CSS)时，是否可以更正相对路径，使其相对于此类 Assets 的指定输出目录？

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));
})