在捆绑销售中使用NPM/Bower在Nuget MVC网站上

Question

我正试图在.NET应用程序中引用前端库的新首选方法来培训自己，因此我已经开始阅读与Gulp一起完成此操作。我已阅读从亭子

与那些更换的NuGet包

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

这篇文章，这样一来使用咕嘟咕嘟

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

但是我有一些麻烦，把他们放在一起。我希望在一起的一些过程不仅可以将所有预安装的Nuget软件包替换为Bower软件包，而且还可以将它们用gulp进行缩小和捆绑，而不是使用Web.Optimization库。第一个链接通过这样做，但吞咽脚本没有提供我期望的输出（例如没有dist文件夹）。这个SO问题有一些很好的答案，但我没有看到我如何捆绑来自鲍尔的所有图书馆（我通读了所有的评论和答案）。

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捆绑，你已经准备好了第二阶段。

现在对于第二阶段，第一阶段和第二阶段，您需要学习'globs'的概念，这个概念基本上是基于通配符的包含和排除文件的吞噬。也许我找到的最有帮助的事情就是gulp插件main-bower-files。因此，要创造良好的水珠开始与我有这个...

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凉亭跑什么，包括我的角度JS插件需要的文件，并排除任何东西我的脚本文件夹（打字稿文件和输出），并排除任何ALREADY缩小文件（我想自己做一个连接文件）。

现在我分开JS和CSS操作和包装其他活动同时调用，所以我结束了

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

现在为如何工作的我在我的分钟以下的例子：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. 
}); 

所以，当这一切都说完了，我结束了一个单一的site.min.js文件在'应用程序'文件夹是串联，缩小，丑化的版本关闭所有我的凉亭组件（和任何其他glob命中）。现在，只是为了给你如何插件密集使用一饮而尽是，这是我加载到我的主要一饮而尽脚本所有插件的声明bascailly做什么.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'); 

你也许并不需要所有的这些（有些是打字稿，有些是棉短绒）

编辑：下面有我的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); 

}）;