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（插件）对资源进行处理的。

FIS3

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

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

lint：代码校验检查，比较特殊，所以需要 release 命令命令行添加 -l 参数

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

preprocessor：标准化前处理插件

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

postprocessor：标准化后处理插件

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

FIS3基础应用

fis.match()

fis.match(selector, props);

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

捕获分组：

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

```javascript

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

````

fis.match('/a/(**.js)', {

release: '/b/$1' // $1 代表 (**.js) 匹配的内容

});