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

Question

我正在尝试训练自己在。net应用程序中引用前端库的新首选方式，所以我已经开始阅读Gulp。我读过这篇关于用

下面的Nuget包替换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

然而，我有一些麻烦把它放在一起。我想要一些过程，不仅将所有的预安装的Nuget包替换为更低的包，而且还缩小和捆绑他们与gulp，而不是使用Web。优化图书馆。第一个链接介绍了这一点，但是gulp脚本没有提供我期望的输出(例如没有dist文件夹)。这个问题有一些很好的答案，但我没有看到我是如何从鲍尔捆绑所有的库的(我通读了所有的评论和答案)。

在Visual Studio 2015中使用Grunt, Bower, Gulp, NPM. NET 4.5 Project

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

我正在使用Visual Studio 2015，正在创建一个新的MVC 4.5.2应用程序，我想让所有前端库被引用和捆绑/缩小，而不使用任何。net库。现在看来，用老方法要简单得多

Answer 1

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

把你正在做的事情分成两个阶段——第一阶段替换nuget中的包，第二阶段替换。net捆绑包。

第一阶段-实际上非常简单，从nuget中删除(卸载)所有具有较低等效的包，然后通过较低命令添加这些包(不要忘记在需要的地方使用——save和——save-dev)。然后将.net包中的脚本位置替换为bower_components中的新位置。一旦你可以确认你的网站可以在这个新布局下工作，同时仍然使用。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
]);

这基本上是说我想要选择所有需要运行任何东西的DISTRO wer插件文件，包括我的angular js，并排除我的脚本文件夹中的任何内容(typescript文件和输出)，并排除任何已经缩小的文件(我想自己做所有这些作为一个连接文件)。

现在我将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文件在"app"文件夹，这是连接，缩小，丑化的版本，我所有的组件(和其他任何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，有些是lint)

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

});