在 Nuget MVC 站点上使用 NPM/Bower 进行捆绑

Question

我正在努力训练自己使用在 .Net 应用程序中引用前端库的新首选方式，因此我已经开始阅读 Gulp 来完成这项工作。我已经阅读了这篇关于用 bower

替换 Nuget 包的文章

https://blogs.msdn.microsoft.com/cdndevs/2015/02/17/using-bower-with-visual-studio/

而这个要用Gulp

http://www.davepaquette.com/archive/2014/10/08/how-to-use-gulp-in-visual-studio.aspx

但是我在将它们组合在一起时遇到了一些问题。我想要一些过程，不仅可以用 bower 包替换所有预安装的 Nuget 包，还可以缩小它们并将它们与 gulp 捆绑在一起，而不是使用 Web.Optimization 库。第一个 link 完成了这个过程，但是 gulp 脚本没有提供我期望的输出（例如没有 dist 文件夹）。 This SO question 有一些很好的答案，但我没有看到我如何捆绑 bower 中的所有库（我通读了所有评论和答案）。

显然这些东西对我来说是新的，所以我会感到困惑，但我想确保我以正确的方式去做。

我正在使用 Visual Studio 2015 并正在创建一个新的 MVC 4.5.2 应用程序，我希望引用所有前端库并且 bundled/minified 不使用任何 .Net 库。在这一点上，用旧方法做起来似乎容易得多

Answer 1

这个问题有点宽泛，但我会抓住要点，因为我已经做了几个星期了。

将您正在做的事情分成两个阶段 - 第一阶段替换 nuget 中的包，第二阶段替换 .net 捆绑包。

第一阶段 - 实际上非常简单，从 nuget 中删除（卸载）所有具有 bower 等效项的包，然后通过 bower 命令添加这些包（不要忘记 --save 和 --save-在需要的地方开发）。然后用 bower_components 中的新位置替换 .net 捆绑包中的脚本位置。一旦您可以确认您的网站在这种新布局下工作，同时仍然使用 .net 捆绑，您就可以进入第二阶段了。

现在进入第二阶段，首先您需要学习 'globs' 的概念，它基本上是基于通配符的包含和排除 gulp 中的文件。可能是我发现的最有用的东西是 gulp 插件 main-bower-files。所以为了创建一个好的 glob，我有这个...

 var paths = {};
 paths.baseReleaseFolder = "app";
paths.baseJSReleaseFile = "site.min.js";
 paths.jsSource = mainBowerFiles();//this gets all your bower scripts in an array
.concat([        
    "node_modules/angular/angular.js",//my angular is loaded via npm not bower because the bower version was giving me dependency issues (bug)
    "node_modules/angular-route/angular-route.js",
    "Source/output.js",//generated by MY typescript compiler
    "!/Scripts", //this is an exclude
     "!**/*.min.js" //also an exclude
]);

这基本上是说我想要 select 所有 DISTRO bower 插件文件运行无论如何，包括我的 angular js，并排除我的脚本文件夹中的任何东西（打字稿文件和输出）并排除任何已经缩小的文件（我想自己将其作为一个串联文件完成）。

现在我将 js 和 css 操作分开并包装另一个事件来调用两者，所以我最终得到

 gulp.task("min", ["min:js", "min:css"]);
 gulp.task("min:js", function () {});
gulp.task("min:css", function () {});

现在作为其工作原理的示例，我在 min:js

中有以下内容

gulp.task("min:js", function () {
var jsFilter = filter('**/*.js', { restore: true });//extra file safty incase my glob is getting non js files somehow
return gulp
    .src(paths.jsSource) //this is the 'glob' IE the file selector 
    .pipe(jsFilter) //enforce my filter from above (gulp-filter)
    //.pipe(debug()) //useful to output what files are in use (gulp-debug)
    .pipe(sourcemaps.init({loadMaps:true})) //create sourcemaps for final output(gulp-sourcemaps)
    .pipe(uglify()) //min and ugilfy files on the way to next step (gulp-uglify)
    .pipe(concat(paths.baseReleaseFolder + "/" + paths.baseJSReleaseFile)) //this takes all the files in the glob and creates a single file out of them in app/site.min.js
    .pipe(rev()) //ignore this, cache-busting but requires work on the .net side to load the files, basically adds the file hash to the file name in the output
    .pipe(sourcemaps.write(".")) //actually write my .map.js file to the final destination
    .pipe(gulp.dest(".")) //write the final site.min.js to its location
    .pipe(jsFilter.restore); //not sure but all filter examples do this.
});

所以当这一切都说完之后，我最终在 'app' 文件夹中得到了一个 site.min.js 文件，它是我所有 Bower 组件（以及其他任何内容）的串联、缩小、丑化版本否则全球命中）。现在只是让您了解使用 gulp 的插件密集程度是多少这是我加载到我的主 gulp 脚本中的所有插件的声明，以基本完成 .net 捆绑为您所做的事情....

var gulp = require('gulp'),
rimraf = require("gulp-rimraf"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
debug = require("gulp-debug"),
uglify = require("gulp-uglify"),
filter = require("gulp-filter"),
rename = require("gulp-rename"),
rev = require('gulp-rev'),
sourcemaps = require('gulp-sourcemaps'),
csslint = require('gulp-csslint'),
jslint = require('gulp-jslint'),
typescript = require("gulp-typescript"),
tslint = require("gulp-tslint"),
runSequence = require('run-sequence'),    
mainNodeFiles = require("npm-main-files"),
mainBowerFiles = require('main-bower-files');

你可能不需要所有这些（有些是 typescript，有些是 linters）

编辑：这是我的 css 函数

gulp.task("min:css", function () {
var cssFilter = filter('**/*.css', { restore: true });
return gulp
    .src(paths.cssSource)
    .pipe(cssFilter)
    //.pipe(debug())
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(concat(paths.baseReleaseFolder + "/" + paths.baseCSReleaseFile))
    .pipe(cssmin())
    .pipe(rev())
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("."))        
    .pipe(cssFilter.restore);

});

在 Nuget MVC 站点上使用 NPM/Bower 进行捆绑

Using NPM/Bower over Nuget MVC Site with bundling

asp.net-mvc

npm

bower

gulp

visual-studio-2015