自动化构建工具学习——fis3

FIS3是什么？：

FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题。

配置文件：默认fis-config.js

常用命令：

fis3 release -d <path>: 构建发布版本到 <path>地址

fis3 inspect: 查看文件分配的属性，即在fis.match(selector, prop)中配置的属性，并且是最终计算完成的结果。

fis3 server open: 打开fis3内置的web server

fis3 server start：启动服务器

fis3 server -h：修改server配置，如修改端口（默认是8080）

fis3 release -wL：监听文件变化+浏览器自动刷新

上传发布版本到服务器时：如果不想配置在命令行中制定服务器，可以在match中制定：

fis3.media("qa").match("*",{
  deploy: fis.plugin('local-deliver',{
  to：'path-to-host'
 })
});

示例一：

假设我们有：

• 两个页面
• 三个 css 文件，其中俩页面各一个 css 文件，剩下一个 css 文件共用
• 包含一个 less 文件，并被俩页面同时使用
• 两个 png 图片
• 两个 js 文件

预处理：

FIS3 提供强大的预处理能力，可以对 less、sass 等异构语言进行预处理，还可以对模板语言进行预编译。比如预处理less

fis.match(".less",{
   parser: fis.plugin('less'),
   rExt: '.css'
})

简单合并：

fis.match("::package",{
   postpackager: fis.plugin('loader')
});
fis.match(".less",{
  parser: fis.plugin("less"),
  rExt: '.css'
})
fis.match(".{css,less}",{
   packTo：'/static/aio.css'
})
fis.match(".js",{
   packTo: '/static/aio.js'
})

构建调试预览：

进入 demo 目录，执行命令，构建即发布到 本地测试服务 根目录下：

fis3 release 

启动内置服务器进行预览：

fis3 server start  --type node