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