FIS3前端工程构建工具

Gulp和Webpack特点对比

Gulp

Gulp侧重于前端开发的整个过程的控制管理（像是流水线），Gulp是对整个过程进行控制，所以在其配置文件（gulpfile.js）中配置的每一个task对项目中该task配置路径下所有的资源都可以管理，我们可以通过给gulp配置不通的task（通过Gulp中的gulp.task()方法配置，比如启动server、sass/less预编译、文件的合并压缩等等）来让gulp实现不同的功能，从而构建整个前端开发流程。

Webpack

Webpack有人也称之为 模块打包机 ，由此也可以看出Webpack更侧重于模块打包，当然我们可以把开发中的所有资源（图片、js文件、css文件等）都可以看成模块，最初Webpack本身就是为前端JS代码打包而设计的，后来被扩展到其他资源的打包处理。Webpack是通过loader（加载器）和plugins（插件）对资源进行处理的。

image

FIS3

集合了webpack的根据依赖关系进行模块打包的能力，同时也保留了对项目每个文件的可自定义编译能力。

FIS3 是以 File 对象为中心构建编译的，每一个 File 都要经历编译、打包、发布三个阶段。

image

lint：代码校验检查，校验代码是否存在错误。

parser：预处理阶段，比如 less、sass、es6、react 前端模板等都在此处预编译处理

preprocessor：标准化前处理插件

standard：标准化插件，处理内置语法等

postprocessor：标准化后处理插件

optimizer：启用优化处理插件，js、css代码压缩等

FIS3命令

release
编译发布一个 FIS3 项目

命令有参数:
-h, --help 参数可以看帮助信息
-d、--dest 编译产出到一个特定的目录

fis3 release -d ./output

-l, --lint 启用文件格式检测
-w、--watch 启动文件监听
-L、--live 启动 livereload 功能，livereload 功能应该跟 watch 功能一起使用（-w 在开启 liveload 的前提下，自动开启），当某文档做了修改时，会自动刷新页面。
-c, --clean 清除编译缓存

fis3 release -c

默认 fis 的每次编译都会检测编译缓存是否有效，如果有效 fis 是不会重复编译的。开启此选项后，fis 编译前会做一次缓存清理。

install
用来从组件平台中下载组件到当前项目中，并自动下载其依赖

init
fis3 脚手架工具，用来快速初始化项目

在 fis-scaffold机构中的库都可以通过 fis3 init ${模板名称} 来初始化到当前目录。当不指定模板名称时，fis3 会使用 defaul 作为模板用来初始化。

server
fis3 内置的小型 web serve

可以通过 fis3 server start 快速开启。如果一切正常，开启后它将自动弹出浏览器打开 http://127.0.0.1:8080/。
需要说明的是，fis3 自带的 server 默认是通过 java 内嵌 jetty 然后桥接 php-cgi 的方式运行的。所以，要求用户机器上必须安装有 jre 和 php-cgi 程序。

inspect
用来查看文件 match 结果。如下所示，将列出项目中所有文件，并显示该文件有哪些属性及属性值，以及该属性是源于哪个 fis.match 配置。

fis3 inspect

 [INFO] Currently running fis3 (/usr/local/lib/node_modules/fis3/)

 ~ /README.md
 -- useHash false `*`   (0th)


 ~ /comp/1-0/1-0.js
 -- useHash false `*`   (0th)
 -- isMod true `/comp/**/*.js`   (1th)
 -- release /static/comp/1-0/1-0.js `/comp/**/*.js`   (1th)


 ~ /comp/2-0/2-0.js
 -- useHash false `*`   (0th)
 -- isMod true `/comp/**/*.js`   (1th)
 -- release /static/comp/2-0/2-0.js `/comp/**/*.js`   (1th)

FIS3基础应用

fis.match()

fis.match(selector, props);

FIS3 把匹配文件路径的路径作为selector，匹配到的文件会分配给它设置的 props。

捕获分组：

使用 node-glob 捕获的分组，可以用于其他属性的设定，如 release, url, id 等。使用的方式与正则替换类似，我们可以用 2, 0 代表的是 match 到的整个字符串。

    fis.match('/a/(**.js)', {
      release:'/b/$0'// $0 代表 /a/(**.js) 匹配的内容});
    });

      fis.match('/a/(**.js)', {
           release: '/b/$1' // $1 代表 (**.js) 匹配的内容
      });

特殊用法:
1、 ::package 用来匹配 fis 的打包过程。
2、::text 用来匹配文本文件 ['css', 'tpl', 'js', 'php' , ........]。

如果你希望命中的文件类型不在列表中，请通过 fis.set('project.fileType.text') 扩展，多个后缀用 , 分割

        fis.set('project.fileType.text', 'cpp,hhp');

3、::image 用来匹配文件类型为图片的文件['svg', 'tif', 'tiff', 'wbmp', ...........]。
如果你希望命中的文件类型不在列表中，请通过 fis.set('project.fileType.image') 扩展，多个后缀用 , 分割。

        fis.set('project.fileType.image', 'raw,bpg');

4、*.html:js 用来匹配命中的 html 文件中的内嵌的 js 部分。
fis3 htmlLike 的文件内嵌的 js 内容也会走单文件编译流程，默认只做标准化处理，如果想压缩，可以进行如下配置。

        fis.match('*.html:js', {
            optimizer: fis.plugin('uglify-js')
        });

5、*.html:css 用来匹配命中的 html 文件中内嵌的 css 部分。

        fis.match('*.html:css', {
              optimizer: fis.plugin('clean-css')
       });

重要特性：规则覆盖
假设有两条规则 A 和 B，它俩同时命中了文件 test.js，如果 A 在 B 前面，B 的属性会覆盖 A 的同名属性。不同名属性追加到 test.js 的 File 对象上。

// A
fis.match('*', {
  release: '/dist/$0'
});

// B
fis.match('test.js', {
  useHash: true,
  release: '/dist/js/$0'
})

那么 test.js 分配到的属性

{
  useHash: true, // B
  release: '/dist/js/$0' // B
}

.

fis.media()

fis.media() 接口提供多种状态功能，比如有些配置是仅供开发环境下使用，有些则是仅供生产环境使用的。

fis.match('*', {
  useHash: false
});

fis.media('dev').match('*.js', {
  useHash:true,
  optimizer: fis.plugin('uglify-js')
});

fis3 release dev

.

.

FIS3 全局属性

全局属性通过 fis.set 设置，通过 fis.get 获取；

内置的默认配置

var DEFAULT_SETTINGS = {
  project: {
    charset: 'utf8',
    md5Length: 7,
    md5Connector: '_',
    files: ['**'],
    ignore: ['node_modules/**', 'output/**', '.git/**', 'fis-conf.js'],
    fileType: {
        text: ['css', 'tpl', 'js', 'php', 'txt',  ...],
        image : ['svg', 'tif', 'tiff', 'wbmp', 'png',  ...]
    }
  }
  options: {}
}

.

文件属性

release

解释：设置文件的产出路径。默认是文件相对项目根目录的路径，以 / 开头。该值可以设置为 false ，表示为不产出文件。
值类型：string
默认值：无

 fis.match('/widget/{*,**/*}.js', {
      release: '/static/$0'
  });

packTo

解释：分配到这个属性的文件将会合并到这个属性配置的文件中
值类型：string
默认值：无

 fis.match('/widget/{*,**/*}.js', {
      packTo: '/static/pkg_widget.js'
 })

packOrder

解释：用来控制合并时的顺序，值越小越在前面。配合 packTo 一起使用。
值类型：Integer
默认值：0

fis.match('/*.js', {
  packTo: 'pkg/script.js'
})

fis.match('/mod.js', {
  packOrder: -100
})

id

解释：指定文件的资源id。默认是 namespace + subpath 的值
值类型：string
默认值：namespace + subpath

fis.match('/static/lib/jquery.js', {
      id: 'jquery',
      isMod: true
});

var $ = require('jquery');

url

• 解释：指定文件的资源定位路径，以 / 开头。默认是 release的值，url可以与发布路径 release 不一致。
• 值类型：string
• 默认值：无

fis.match('*.{js,css}', {
      release: '/static/$0',
      url: '/static/new_project/$0'
  })

charset

解释：指定文本文件的输出编码。默认是 utf8，可以制定为 gbk 或 gb2312等。
值类型：string
默认值：无

useHash

解释：文件是否携带 md5 戳
值类型：bool
默认值：false

fis.match('*.css', {
      useHash: false
  });

  fis.media('prod').match('*.css', {
      useHash: true
  });

domain

解释：给文件 URL 设置 domain 信息
值类型：string
默认值：无

fis.media('prod').match('*.js', {
      domain: 'http://cdn.baidu.com/'
  });

rExt
解释：设置最终文件产出后的后缀
值类型：string
默认值：无

fis.match('*.less', {
      rExt: '.css'
  });

useMap

解释：文件信息是否添加到 map.json
值类型：bool
默认值：无
说明： 分配到此属性的资源出现在静态资源表中，现在对 js、css 等文件默认加入了静态资源表中；

isMod

解释：标示文件是否为组件化文件。
值类型：bool
默认值：无
说明：标记文件为组件化文件。被标记成组件化的文件会入map.json表。并且会对js文件进行组件化包装。

fis.match('/widget/{*,**/*}.js', {
      isMod: true
  });

useCompile

注释： FIS是否对文件进行编译
值类型：bool
默认值： true
说明：设置为 false 后文件会通过FIS发布，但是FIS不对文件做任何修改
.

插件属性

lint

启用 lint 插件进行代码检查

fis.match('*.js', {
    lint: fis.plugin('js', {

    })
})

parser

fis.match('*.less', {
   parser: fis.plugin('less'), //启用fis-parser-less插件
   rExt: '.css'
});

preprocessor

标准化前处理

fis.match('*.{js,es,es6,jsx,ts,tsx}', {
  preprocessor: fis.plugin('js-require-css')
})

fis.match('*.{js,es,es6,jsx,ts,tsx}', {
  preprocessor: fis.plugin('js-require-file')
})

standard

标准化处理，处理内置语法等

postprocessor

标准化处理后

fis.match('*.{js,tpl}', {
   postprocessor: fis.plugin('require-async')
});

optimizer

启用优化处理插件，并配置其属性

fis.match('*.css', {
    optimizer: fis.plugin('clean-css')
});

fis.match('*.png', {
    optimizer: fis.plugin('png-compressor')
})

fis.match('{*.js,*.vm:js,*.html:js}', {
    // js 压缩;
    optimizer: fis.plugin('uglify-js', {
    })
})

打包阶段插件

打包阶段插件设置时必须分配给所有文件，设置时必须 match ::package，不然不做处理。

prepackager

解释：打包预处理插件
值类型：Array | fis.plugin | function
默认值：无
用法：

fis.match('::package', {
      prepackager: fis.plugin('plugin-name')
  })

packager

解释：打包插件
值类型：Array | fis.plugin | function
默认值：无
用法：

fis.match('::package', {
    packager: fis.plugin('map'),
});

spriter

解释：打包后处理csssprite的插件。
值类型：Array | fis.plugin | function
默认值：无
用法：

fis.match('::package', {
      spriter: fis.plugin('csssprites')
  })
// 对 CSS 进行图片合并
fis.match('*.css', {
  // 给匹配到的文件分配属性 `useSprite`
  useSprite: true
});

li.list {
  background-image: url('./img/list-1.png?__sprite');
}

postpackager

解释：打包后处理插件。
值类型：Array | fis.plugin | function
默认值：无

deploy

解释：设置项目发布方式
值类型：Array | fis.plugin | function
默认值：fis.plugin('local-deliver')
用法：假设项目开发完后，想部署到其他机器上，我们选择 http 提交数据的方式部署

fis.match('**', {
      deploy: fis.plugin('http-push', {
          receiver: 'http://target-host/receiver.php', // 接收端
          to: '/home/work/www' // 将部署到服务器的这个目录下
      })
  })

常用插件

• local-deliver
  FIS 默认的部署插件，提供本地部署

fis.match('*.js', {
    deploy: fis.plugin('local-deliver', {
        to: './output'
    })
})

• http-push
  FIS 默认的部署插件，提供本地部署以及远程upload部署能力。

fis.match('*.js', {
    deploy: fis.plugin('http-push', {
        //如果配置了receiver，fis会把文件逐个post到接收端上
        receiver: 'http://www.example.com:8080/receiver.php',
        //这个参数会跟随post请求一起发送
        to: '/home/fis/www',
        // 附加参数, 后端通过 $_POST['xx'] 获取
        // 如果 data 中 含有 to 这个 key, 那么上面那个to参数会覆盖掉data里面的to
        data: {
            token : 'abcdefghijk',
            user : 'maxming',
            uid : 1
        }
    })
})

• replace
  内容替换插件 npm install [-g] fis3-deploy-replace

deploy: [
        fis.plugin('replace', {
            from: 'from/string',
            to: 'to/string'
        }),
        fis.plugin('local-deliver') //must add a deliver, such as http-push, local-deliver
    ]

• deploy-tar
  将产出文件，打包成 tar 文件。

.match('/*/(**.{js,scss,css})',{
      deploy: [
           fis.plugin('tar',{
               filename: 'plus-h5.static.tar.gz'
           }),
          fis.plugin('local-deliver', {
               to: './'
          })
     ]
 })

• hook-commonjs
  CommonJs 模块化支持插件。

fis.hook('commonjs')

• fis3-hook-amd
• fis3-hook-cmd

FIS3嵌入资源

嵌入资源即内容嵌入，可以为工程师提供诸如图片base64嵌入到css、js里，前端模板编译到js文件中，将js、css、html拆分成几个文件最后合并到一起的能力。有了这项能力，可以有效的减少http请求数，提升工程的可维护性。 fis不建议用户使用内容嵌入能力作为组件化拆分的手段，因为声明依赖能力会更适合组件化开发。

在html中嵌入资源

在html中可以嵌入其他文件内容或者base64编码值，可以在资源定位的基础上，给资源加 ?__inline 参数来标记资源嵌入需求。

• html中嵌入图片base64

• html中嵌入样式文件和脚本

• html中嵌入页面文件

.

在js中嵌入资源

js css 同上

• 在js中嵌入图片

var img = __inline('images/logo.gif');

var img = 'data:image/gif;base64lhDgGBALBn6eY9PnKyfO...Jzna6853wjKc850nPeoYgAgA7';

var img = __uri("../../common/img/okay_logo.png");
var img = "http://dev-plusappi.xk12.cn/common/img/okay_logo.png";

在css中嵌入资源

• 在css文件中嵌入其他css文件

@import url('demo.css?__inline');

.

预处理插件编写

假设给定项目中要是用 es6，线上运行时解析成标准 js 性能堪忧，想用自动化工具进行预处理转换。如原理介绍 parser 阶段就是进行归一化的过程，通过预处理阶段，整个文件都会翻译为标准的文件，即浏览器可解析的文件，这里我们选择使用babel编译es6。

准备

.es6 后缀最终变为 .js
使用 babel 进行 es6 的转换
FIS3 实现一个 parser 类型的插件，取名叫 translate-es6，插件全名 fis3-parser-translate-es6

开发插件

FIS3 支持 local mode 加载一个插件。当你调用一个插件的时候，配置如下：

{
  parser: fis.plugin('translate-es6')
}

如果项目的根目录 node_modules 下有这个插件，就能挂载起来。

my-proj/node_modules/fis3-parser-translate-es6/index.js

// babel node.js api 只有 babel-core 不能完成翻译
// babel-core 需要安装依赖 babel-preset-es2015
// 参考: 阮一峰的es6入门 http://es6.ruanyifeng.com/#docs/intro
var babel = require('babel-core');
module.exports = function (content, file, options) {
  var result = babel.transform(content, opts);
  return result.code; // 处理后的文件内容
}

配置使用

fis.match('*.es6', {
  parser: fis.plugin('translate-es6', {
    presets: ['es2015']
  }),
  rExt: '.js' // .es6 最终修改其后缀为 .js
})