前端工程构建工具FIS3

想要能够轻松解决构建流程，最实用的就是构建工具FIS3。好多人还不太了解它的工作原理，我们来简单的学习一下。

FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题。 其主要功能基本都是围绕着前端开发所需要的三种编译能力：资源定位、内容嵌入、依赖声明。

FIS3提供了一种简单的配置方式，类似于写CSS，后面书写的规则会覆盖前面前面书写的规则，有一些固定的规则供用户设置；文件分配到的属性，将会在编译阶段决定此文件将如何处理。FIS3 的核心配置思想是通过给文件分配属性来控制工具对文件的处理，比如压缩、异构语言的解析、资源依赖的收集、代码检查等；

FIS3 重新梳理构建流程，文件在 FIS3 中编译都是由用户指定的插件来完成，包括合并、压缩优化以及对异构语言的解析等。FIS3 还可以支持本地 NPM 包的加载，这样一来我们就不再需要 npm install -g 安装一个插件到全局包目录，只要加载本地插件就可以了；这样有利于插件的开发调试。但为了便于维护，建议你最终发布到 NPM 上的插件依然使用全局安装。

FIS3 对整个编译流程提供诸多事件，方便你做特定化需求；并且推出新的插件类型 hook，hook 插件会在编译之前做加载，可在其内部绑定一些事件来完成特定的需求，比如相对路径的支持。

FIS3的设计原则是“基于依赖关系表的静态资源管理系统与模块化框架设计”，所以我们就从这两个方面来理解。

静态资源管理

关于性能优化是前端设计者必须思考的问题，一个网站如果想要做到快速响应，最有效的方法就是尽量使网站静态化。做到动静分离。我们可以使用CDN技术，将静态资源保存在CDN上，可以用静态资源的CDN路径来获取资源，减轻服务器的压力。FIS3实现了一套“静态资源管理系统”，在开发页面的时候只需要用相对路径开发，构建后会自动生成带有hash静态资源版本号的文件，避免发布后页面错乱。

静态资源的大小也会影响网络传输效率，FIS3也提供了很多对图片进行合并的插件、并且对HTML、js、css文件进行合并，FIS3会对路径中带有 ?__sprite 的图片进行合并，减少了请求数量。但只有资源合并是不能够按需加载资源的，然而静态资源按需加载也是减少资源冗余的重要方式。使用FIS3会生成静态资源映射表，这是一个记录文件依赖等信息的表，虽然不会生成map.json，但当文件包含“__RESOURCE_MAP__”字符，就会用表结构数据替换这里的字符。静态资源系统可以根据表结构数据中对相应的信息进行加载。这样就解决了按需加载的问题。

模块化开发

前端模块化开发对开发人员来说具有很重要的意义，模块化可以方便开发人员复用代码，提升可维护性。我们熟悉的模块化开发有commonjs、AMD、CMD，模块化框架有mod.js、require.js、sea.js等。

FIS3不支持模块化开发，所以需要fis3-hook-commonjs/fis3-hook-amd/fis3-hook-cmd、fis3-postpackager-loader以及fis3-deploy-wsd-cdn-upload插件的支持。

整个 FIS3 的构建流程大题概括分为三个阶段：
1.扫描项目目录获得文件并初始化出一个文件对象列表
2.对文件对象中每一个文件进行单文件编译
3.获取用户设置的 package 插件，进行打包处理（包括合并图片）

下面是一些FIS3的常用命令，希望可以帮助到你们：

1、fis 打开根目录

fis3 server start
fis3 server open

2、将项目发布到服务器中

cd 进入项目中
fis3 release 即可发布到服务器中

3、安装fis的包管理工具 lights

npm install -g lights

4、查看fis release的参数

fis release -h

5、静态资源压缩

在配置文件中添加如下代码：

  // 清除其他配置，只保留如下配置

            fis.match('*.js', {

            // fis-optimizer-uglify-js 插件进行压缩，已内置

            optimizer: fis.plugin('uglify-js')

            });

          
 fis.match('*.css', {
            // fis-optimizer-clean-css 插件进行压缩，已内置
            optimizer: fis.plugin('clean-css')
            });
 fis.match('*.png', {
            // fis-optimizer-png-compressor 插件进行压缩，已内置
            optimizer: fis.plugin('png-compressor')
            });