背景:
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 的“标准”是松散的,并且不被遵守,即使对于流行的包也是如此。
在串联过程中,有时需要实现特定的顺序。我一直无法找到一种自动执行此操作的优雅方法 - 我创建了一组源文件,但这并不理想,因为它需要手动检查和编辑每个包,这在很大程度上否定了包管理的整个概念。
问题:
最佳答案
您可以使用 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));
})
关于asp.net-mvc - 如何使用 Gulp 高效管理和处理 Bower 包? (VS2015,Visual Studio 2015),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31628979/