官方文件没有多大帮助:project.json reference.
搜索globbing模式,并找到一些带有gulp示例的artilcles,我想出了这个wwwroot / js / ** / *!(*.min.js),但它似乎不起作用.
我的语法错了吗?或者,只是project.json和dotnet发布不支持这种语法?
"publishOptions": { "include": [ "wwwroot","Views","Areas/**/Views","appsettings.json","web.config" ],"exclude": [ "wwwroot/lib","wwwroot/js/**/*!(*.min.js)","wwwroot/css/*.less","wwwroot/_references.js" ],"includeFiles": [],"excludeFiles": [] },
解决方法
在最新的工具中,默认的MVC不再包含gulpfile.js,因为最常见的用法是缩小和捆绑js文件,即使没有使用外部库,因此gulp可能对新用户来说有点压倒性.
但是当您右键单击解决方案资源管理器中的bundleconfig.json文件并选择“Bundler& Minifier”>时,可以很容易地将其恢复. “转换为Gulp”.
这将在项目的根目录中创建gulpfile.js和package.json(nodejs依赖项),并将npm文件夹添加到Solution Explorer的“Dependencies”部分.在Windows资源管理器中观察时,您将在项目根文件夹中看到node_modules文件夹.这就是npm将下载所有软件包及其依赖项的地方.
生成的gulpfile.js看起来像这样,并且有一些预定义的任务.我不会将此文件用作示例,因为它强烈基于bundleconfig.json及其结构并使用我的gulpfile.json,它曾经与较旧的模板一起提供.
"use strict"; var gulp = require("gulp"),rimraf = require("rimraf"),concat = require("gulp-concat"),cssmin = require("gulp-cssmin"),uglify = require("gulp-uglify"); var webroot = "./wwwroot/"; var paths = { app: webroot + "app/",libs: webroot + "lib/",js: webroot + "js/**/*.js",minjs: webroot + "js/**/*.min.js",css: webroot + "css/**/*.css",minCss: webroot + "css/**/*.min.css",concatJsDest: webroot + "js/app.min.js",concatCssDest: webroot + "css/app.min.css" }; gulp.task("clean:js",function (cb) { rimraf(paths.concatJsDest,cb); }); gulp.task("clean:libs",function (cb) { rimraf(paths.libs,cb); }); gulp.task("clean:css",function (cb) { rimraf(paths.concatCssDest,cb); }); gulp.task("clean",["clean:js","clean:css","clean:libs"]); gulp.task("min:js",function () { return gulp.src([paths.js,"!" + paths.minjs],{ base: "." }) .pipe(concat(paths.concatJsDest)) .pipe(uglify()) .pipe(gulp.dest(".")); }); gulp.task("min:css",function () { return gulp.src([paths.css,"!" + paths.minCss]) .pipe(concat(paths.concatCssDest)) .pipe(cssmin()) .pipe(gulp.dest(".")); }); gulp.task("min",["min:js","min:css"]); gulp.task("libs",function (cb) { gulp.src([ 'bootstrap/**/*.js','bootstrap/**/*.css','jquery/**/*.js`,// we can also limit this to `jquery/dist/**/*.js to only include distribution files 'jquery/**/*.css' ],{ cwd: "node_modules/**" }) .pipe(gulp.dest(paths.libs)); }); gulp.task("app",function (cb) { gulp.src([ 'app/**.js' ]) .pipe(gulp.dest(paths.app)); }); gulp.task("default",['clean','libs']);
它看起来比实际更复杂.有几个minizier任务(min:js,min:css)和一个一般的minifier任务min,它按顺序运行所有其他任务.
一个干净的任务,从wwwroot删除输出文件.从模板转换时,它仅删除默认的wwwroot / js / site.min.js文件.
由于默认模板中没有使用javascript库,除了wwwroot / lib文件夹中的内容之外,包都没有以这种方式处理.
所以你可能想要的第一件事是从npm获取bootstrap和jquery而不是模板提供的静态版本.所以我们将依赖项添加到package.json中.
{ "name": "app","version": "0.0.0","private": true,"dependencies": { "bootstrap": "3.3.6","jquery": "2.2.0" },"devDependencies": { "gulp": "3.8.11","gulp-concat": "2.5.2","gulp-cssmin": "0.1.7","gulp-uglify": "1.2.0","rimraf": "2.2.8" } }
例如,上面gulpfile.js中的libs任务将把包的所有必需文件复制到wwwroot.我说需要,因为在软件包中经常有用于调试和填充的非捆绑文件,我们通常不希望在wwwroot内部(它们可能会变得非常大).
gulp.task("libs",'bootstrap/**/*.css' ],{ cwd: "node_modules/**" }) .pipe(gulp.dest(paths.libs)); });
它将在node_modules文件夹中的bootstrap文件夹中查找所有* .js和* .css文件,并将它们复制到配置为wwwroot / lib /的path.libs.
app任务对我们自己的代码也是如此. clean清除文件夹和(即在从调试版本发布到发布版本之前或发布之前).
最后,您可以将任务绑定到某些VS事件.您需要打开“Task Runner Explorer”视图(View> Other Window> Task Runner Explorer).在那里,您可以选择一个任务并右键单击它,然后“绑定”并选择其中一个绑定(在构建之前,之后构建,清理,打开项目).他们非常自我解释,“清洁”意味着你做“构建>清洁解决方案”.
现在到出版部分.您可以在发布应用程序时(通过dotnet或Visual Studio)运行某些命令.
在project.json中有一个脚本部分.
"scripts": { "prepublish": [ "npm install","bower install","gulp clean","gulp min","gulp libs" ],"postpublish": [ "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ] }
每个条目“预发布”是要执行的一个命令.在此示例中,在发布开始之前,将首先执行npm install以恢复所有npm依赖项.然后bower安装以安装由bower管理的依赖项(如果你不使用bower并通过npm完成所有操作,则将其删除).
接下来的三个命令是有趣的命令,它们将执行gulp任务.我们还可以通过添加“发布”任务来简化此操作.
gulp.task("publish",'libs','min']); "scripts": { "prepublish": [ "npm install","gulp publish" ],"postpublish": [ "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ] }
这会将所有必要的发布文件复制到wwwroot文件夹中,发布文件然后调用“postpublish”脚本.
这是gulp的粗略介绍.它有一个学习曲线,但是一旦你开始工作它会影响整个工作流程.
这里没有涉及的是添加一个可以查看某个文件夹的监视任务(我通常在项目根目录中使用app文件夹),当任何文件发生变化时,运行app任务,所以我们的代码被迷你并复制到wwwroot并在调试时可用.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。