fis3-learn - 2 配置篇

功能组合

！！！此部分内容只是汇总仅供参考，详细内容见http://fis.baidu.com/fis3/docs/beginning/intro.html

建议先大致看一遍下面内容，然后到上面链接详细了解，再回来看汇总

1. 用 FIS3 做压缩、文件指纹、图片合并、资源定位

fis3 release时添加 md5、静态资源压缩、css 文件引用图片进行合并

// 加 md5fis.match('*.{js,css,png}', {  useHash: true});// 启用 fis-spriter-csssprites 插件fis.match('::package', {  spriter: fis.plugin('csssprites')})// 对 CSS 进行图片合并fis.match('*.css', {  // 给匹配到的文件分配属性 `useSprite`  useSprite: true});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')});

2. 上面配置追加如下配置，fis3 release debug启用 media debug 的配置，覆盖上面的配置，把诸多功能关掉。

fis.media('debug').match('*.{js,css,png}', {  useHash: false,  useSprite: false,  optimizer: null})

** 启动服务服务知识小补充

- 使用`fis server open ` 可以打开编译目录，- 使用`fis server info` 可以查看server配置信息- 使用`fis server clean` 可以清空编译目录- 使用`fis3 release -wL` `w`参数可以对文件进行监听修改文件会构建发布。而且其编译是增量的，编译花费时间少。`L`参数浏览器自动刷新

3. 上传测试服务器

// 其他配置...fis.media('qa').match('*', {  deploy: fis.plugin('http-push', {    receiver: 'http://cq.01.p.p.baidu.com:8888/receiver.php',    to: '/home/work/htdocs' // 注意这个是指的是测试机器的路径，而非本地机器  })});

这样就可以使用fis3 release qa上传测试机器，fis3 release产出到本地测试服务器根目录

4. 替代内置Server

FIS3 内置了一个 Web Server 提供给构建后的代码进行调试。如果你自己启动了你自己的 Web Server 依然可以使用它们。

假设你的 Web Server 的根目录是 /Users/my-name/work/htdocs，那么发布时只需要设置产出目录到这个目录即可。

fis3 release -d /Users/my-name/work/htdocs

如果想执行 fis3 release 直接发布到此目录下，可在配置文件配置；

fis.match('*', {  deploy: fis.plugin('local-deliver', {    to: '/Users/my-name/work/htdocs'  })})

5. 补充配置

示例在上一篇起步里下载的 demo-lv1 里面可以看到
两套配置方案，用fis3 release dev -ld ./output和 fis3 release production -ld ./output-production进行区分，
其中，dev为默认，如果不写默认使用dev里面的配置

// default settings. fis3 releasefis  .media('dev')  .match('**', {    useHash: false  });// fis3 release productionfis  .media('production')  .match('*.js', {    optimizer: fis.plugin('uglify-js')  })  .match('*.{css,scss}', {    optimizer: fis.plugin('clean-css')  })  .match('*.png', {    optimizer: fis.plugin('png-compressor')  });

---

在上一篇起步篇下载的文件中有demo-lv1.zip初级示例和fis3-demo.zip综合示例，建议分别尝试一下

fis中一共包含一下三个命令

fis3 installfis3 releasefis3 server

分别是安装插件，编译部署，发布到服务器（其中服务器支持php，nodejs等模拟服务器）

以上三条命令基本解决了大部分前端问题

更详尽的内容都在fis-conf.js文件配置参数里面，本文总结了大部分常用配置，建议完整看完官方配置内容再回来看会中内容

fis支持glob语法，对于正则不是很好的童鞋也是个福音哈

行文匆忙难免会有纰漏，如果发现错误请在评论中指出，持续更新……