fis3-learn - 2 配置篇

fis3-learn - 2 配置篇

功能组合

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

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

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

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

// 加 md5
fis.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 release
fis
  .media('dev')

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


// fis3 release production
fis
  .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 install
fis3 release
fis3 server

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

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

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

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

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