给ASP.NET Core Web发布包作减法

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，wwwroot下已包含到项目中的文件都会被发布。虽然咱们可使用捆绑和微小的技术对js、css进行压缩来减小网页大小来提高加载速度。可是，咱们发布包的大小却不能减小。

若是咱们项目中引用了较少的前端包文件，也无可厚非。但当咱们引用了较多的包文件时。那咱们的发布包将会占用很大一部分空间。尤为是当咱们进行CI/CD时，将会耗费大量的时间来进行包还原和包文件上传。

2. 思路

咱们就以集成AdminLte的ASP.NET Core Mvc项目为例，看看发布的包大小究竟有多大。

从上图咱们看到发布后wwwroot/plugins文件夹就占了很大一部分空间。而wwwroot/plugins中就是安装的Bower包。

那这些Bower包中的文件咱们都有用到吗？显然没有。咱们就顶多引用了个js和css文件而已。到这里，减负的思路咱们就清晰了。剔除ASP.NET Core Web中未引用的Bower包文件，把没有引用到的文件删除不就得了？！

可是你随便打开一个Bower包文件夹，你就不想这么作了，一个一个删要删到何时。并且若是直接去删除Bower包中无用的文件，可能会影响bower包的管理，好比bower包的升级降级。

不卖关子了，思路以下：

1. 新建一个文件夹，将引用的文件复制到另外的目录。（保持原bower包中的目录层级）
2. 修改项目中的引用到新的文件夹拷贝路径下。
3. 将原来的wwwroot\plugins 排除到项目外（Exclude From Project）

你可能会说，这么复杂啊，还不如我一个一个删除啊。别怕，咱们让这一切自动化。而这个自动化工具就是Gulp.js。

3. 行动

以咱们以前的Demo为例。

1. 全局安装 gulp：
   $ npm install --global gulp
2. 做为项目的开发依赖（devDependencies）安装：

$ npm install --save-dev gulp
$ npm install --save-dev path
$ npm install --save-dev del

安装成功后会在项目根目录建立package-lock.json文件和node_components文件夹。

1. 在项目根目录下建立一个名为 gulpfile.js 的文件。将如下代码粘贴复制进去。

const gulp = require('gulp');//1. 引用gulp
var path = require('path');//2. 引用path
var 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，那就是了。

1. 运行gulp
   右键gulpfile.js-->Task Runner Exploerer-->双击Gulpfile.js-Tasks-default，便可运行。操做动图以下：
   
   运行后，须要复制的Bower包文件和文件夹就会复制到wwwroot\lib文件夹下。如图：
   
2. 将bower包安装文件夹排除到项目外。
3. 更新项目中现有文件的引用到lib目录下。
4. That's all, thank you.

4. 效果

从新发布，咱们能够发现发布的包大小已有40M减少到8M。