Question

我正在努力训练自己在.Net应用程序中引用前端库的新首选方式，所以我开始阅读使用Gulp这样做。我读过这篇关于用凉亭替换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文件夹）。这个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捆绑，您就可以进入第二阶段了。

现在对于第二阶段，第一阶段和formost你需要学习'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 bower插件文件，包括我的角度js，并在我的脚本文件夹（打字稿文件和输出）中排除任何内容并排除任何ALREADY缩小文件（我想要把它作为一个连接文件自己完成。）

现在我将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组件的连接，缩小，uglified版本（以及其他任何全球命中的版本））。现在只是为了让你了解如何使用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');

你可能不需要所有这些（有些是打字稿，有些是短信）

编辑：继承我的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进行捆绑

1 个答案: