我正在尝试对.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

但是我在将所有内容组合在一起时遇到了一些麻烦。我需要一些过程,这些过程不仅将所有预安装的Nuget软件包替换为bower软件包,而且将其最小化并用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库。在这一点上,用旧方法似乎容易得多

最佳答案

这个问题有点笼统,但由于我已经做了几周了,所以我遇到了关键问题。

将您的工作分为两个阶段-将nuget的软件包替换为第一阶段,并将.net捆绑替换为另一阶段。

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

现在进入第二阶段,首先,也是最重要的是,您需要学习“ glob”的概念,它们基本上是基于通配符的包含和排除gulp文件的。我发现可以帮助解决这一问题的最有用的方法就是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 Bower插件文件,包括我的angular js,并排除我的脚本文件夹(打字稿文件和输出)中的任何内容,并排除所有已经缩小的文件(我想要做的全部)我自己作为一个串联文件)。

现在,我将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组件(以及其他任何命中的东西)的串联,缩小和丑陋的版本。现在只是让您了解使用gulp插件的密集程度,这是我加载到我的主要gulp脚本中以执行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);


});

10-05 20:48
查看更多