README - 图1

FIS3

README - 图2 README - 图3
Build Status
Coverage Status
README - 图6

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

如果对FIS先有些了解,但理解不深的,可试着带着这句话去看文档

FIS3 会在配置文件中给文件添加相应属性,用于控制文件的编译、合并等各种操作;文件属性包括基本属性和插件属性,详细请参考

  1. npm install -g fis3

如果 Node 版本低于 4.x 请安装旧版本

  1. npm install -g fis3@3.4.36

文档

快速入门、配置、插件开发以及原理等文档 doc/docs/INDEX.md

例子

  1. mkdir my-proj
  2. cd my-proj
  3. fis3 init
  4. fis3 release
  5. fis3 server start --type node

fis-conf.js 的例子

  1. // default settings. fis3 release
  2. // Global start
  3. fis.match('*.{js,css}', {
  4. useHash: true
  5. });
  6. fis.match('::image', {
  7. useHash: true
  8. });
  9. fis.match('*.js', {
  10. optimizer: fis.plugin('uglify-js') // js 压缩
  11. });
  12. fis.match('*.css', {
  13. optimizer: fis.plugin('clean-css') // css 压缩
  14. });
  15. fis.match('*.png', {
  16. optimizer: fis.plugin('png-compressor') // png 图片压缩
  17. });
  18. // Global end
  19. // default media is `dev`
  20. fis.media('dev')
  21. .match('*', {
  22. useHash: false,
  23. optimizer: null
  24. });
  25. // extends GLOBAL config
  26. fis.media('production');

其他例子

https://github.com/fex-team/fis3-demo

常用插件

优化类(插件属性:optimizer)

预处理类(插件属性:parser)

来源(书栈小编注)

https://github.com/fex-team/fis3