时间:2021-05-18
1.引言
紧接上篇:ASP.NET Core Web App应用第三方Bootstrap模板。这一节我们来讲讲如何优化ASP.NET Core Web发布包繁重的问题。
在ASP.NET Core Web App中我们可以通过Bower或NPM来安装一些JS、CSS插件,来方便我们组织前端组件。但是这也给我带来了一个问题,那就是发布时需要把安装的Bower包或NPM包都要打包上传到服务器。
如果现在发布ASP.NET Core Web App,ponents文件夹。
在项目根目录下创建一个名为 gulpfile.js 的文件。将以下代码粘贴复制进去。
const gulp = require('gulp');//1. 引用gulpvar path = require('path');//2. 引用pathvar del = require('del');//3.引用del//定义路径const paths = { src: 'wwwroot/plugins/', dest: 'wwwroot/lib/'};//定义需要完整复制的Bower文件夹const copyFolders = [ "bootstrap", "font-awesome"];//定义项目中需要引用的bower包中的js、css文件const copyFiles = [ "Ionicons/css/ionicons.css", "jquery/dist/jquery.min.js", "bootstrap/dist/js/bootstrap.min.js"];//在复制之前先清空生成目录gulp.task('clean:all', function (cb) { del([paths.dest], cb);});//复制文件gulp.task('copy:file', () => { //循环遍历文件列表 var tasks = copyFiles.map(function (file) { //拼接文件完整路径 var scrFullPath = path.join(`${paths.src}`, file); //拼接完整目标路径 var index = file.lastIndexOf('/'); var destPath = file.substring(0, index); var destFullPath=path.join(`${paths.dest}`, destPath); return gulp.src(scrFullPath) .pipe(gulp.dest(destFullPath)); });});//复制文件夹gulp.task('copy:folder', () => { var tasks = copyFolders.map(function (folder) { //拼接完整目标路径 var destFullPath = path.join(`${paths.dest}`, folder); return gulp.src(path.join(`${paths.src}`, folder + '*')) .pipe(gulp.dest(destFullPath)); });});//将三个任务组装在一起gulp.task('default', ['clean:all', 'copy:file', 'copy:folder']);代码注释的很详细,就不过多赘述了。有一点需要解释下,为什么需要完整拷贝bootstrap和font-awesome呢?因为引用的font-awesome.min.css会引用包文件的一些字体文件等,为了省事,就把包全部拷贝了一遍。而一般绝大多数包都是简单拷贝css和js文件就ok了的。而至于什么时候拷贝文件,什么时候文件夹。很简单,默认先拷贝文件,运行项目,然后浏览器F12,如果发现有无法加载的error,那就是了。
运行gulp
右键gulpfile.js-->Task Runner Exploerer-->双击Gulpfile.js-Tasks-default,即可运行。操作动图如下:
运行后,需要复制的Bower包文件和文件夹就会复制到wwwroot\lib文件夹下。如图:
将bower包安装文件夹排除到项目外。
更新项目中现有文件的引用到lib目录下。
That's all, thank you.
4. 效果
重新发布,我们可以发现发布的包大小已有40M减小到8M。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
很多人会问ASP和ASP.net有什么区别呢?ASP与ASP.NET是Microsoft公司在Web应用程序开发上的两项重要技术。虽然ASP和ASP.net
很多人会问ASp和ASp.net有什么区别呢?ASp与ASp.NET是Microsoft公司在Web应用程序开发上的两项重要技术。虽然ASp和ASp.net从字
本文实例讲述了ASP.NET动态增加HTML元素的方法。分享给大家供大家参考,具体如下:在使用asp.net进行web开发的时候页面中的中的信息可以通过asp.
ASP.NET网站建设概述ASP.NET是一个统一的Web开发模型,它包括您使用尽可能少的代码生成企业级Web应用程序所必需的各种服务。ASP.NET作为.NE
开始介绍如何编程之前,先介绍如何使用模拟器浏览ASP.NET移动WEB页面。由于不同的移动设备针对ASP.NET移动程序的支持程度是有较大差距的,因此显示的