asp.net-mvc - 在 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 库。第一个链接逐步执行此操作，但 gulp 脚本没有提供我期望的输出(例如没有 dist 文件夹)。这个问题有一些很好的答案，但我没有看到如何捆绑 Bower 中的所有库(我通读了所有评论和答案)。

Using Grunt, Bower, Gulp, NPM with Visual Studio 2015 for a ASP.NET 4.5 Project

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

我正在使用 Visual Studio 2015 并创建一个新的 MVC 4.5.2 应用程序，并且我希望在不使用任何 .Net 库的情况下引用和捆绑/缩小所有前端库。在这一点上，用旧方法似乎要容易得多

Answer 1

这个问题有点宽泛，但我会捕获要点，因为我已经做了这件事几周了。

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

第一阶段 - 实际上非常简单，从 nuget 中删除(卸载)所有具有 Bower 等效项的软件包，然后通过 Bower 命令添加这些软件包(不要忘记 --save 和 --save-dev ，其中需要)。然后将 .net 捆绑中的脚本位置替换为 Bower_components 中的新位置。一旦您确认您的网站可以在此新布局下运行，同时仍使用 .net 捆绑，您就可以进入第二阶段了。

现在，对于第二阶段，首先也是最重要的是，您需要学习“glob”的概念，它基本上是基于通配符的 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
]);

这基本上是说我想选择运行任何内容所需的所有 DISTRO Bower 插件文件，包括我的 Angular js，并排除我的脚本文件夹中的任何内容( typescript 文件和输出)并排除任何已经缩小的文件(我想我自己将这一切作为一个串联文件完成)。

现在我将 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 组件(以及 glob 命中的其他任何内容)的串联、缩小、丑化版本)。现在只是为了让您了解使用 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 ，有些是 linter)

编辑:这是我的 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);

});