这个问题有点广泛,但不幸的是关键点,因为我几个星期以来一直在做这个确切的事情。
将你正在做的事分成两个阶段 - 将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);
});
这非常有帮助,谢谢。我有问题采取你的方法,并为CSS做但 –
发布我的分:css –
does mainBowerFiles()不包含css文件? –