在捆綁銷售中使用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); 

}）;