Front-end Integrated Solution（前端集成解决方案）

解决前端工程的根本问题！

F.I.S简介

• 什么是F.I.S

功能概述

• 跨平台支持win、mac、linux等系统
• 无内置规范，可配置 开发和部署规范，用于满足任何前后端框架的部署需求
• 对html、js、css实现 三种语言能力 扩展，解决绝大多数前端构建问题
• 支持二次包装，比如 spmx、 phiz、 chassis，对fis进行包装后可内置新的插件、配置，从而打造属于你们团队的自己的开发工具
• 自动生成静态资源表关系表（map.json），可用于 连接前后端开发框架
• 所有静态资源自动加 md5版本戳，服务端可放心开启永久强缓存
• 支持给所有静态资源添加域名前缀
• 可灵活扩展的插件系统，支持对构建过程和命令功能进行扩展，现已发布N多 插件
• 通过插件配置可以在一个项目中无缝使用 less、coffee、markdown、jade等语言开发
• 内置 css sprites插件，简单易用
• 内置 png图片压缩插件，采用c++编写的node扩展，具有极高的性能，支持 将png24压缩为png8
• 内置本地开发调试服务器，支持完美运行 java、jsp、php 等服务端语言
• 支持文件监听，保存即发布
• 支持浏览器自动刷新，可同时刷新多个终端中的页面，配合文件监听功能可实现保存即刷新
• 支持上传到远端服务器，配合文件监听，浏览器自动刷新功能，可实现保存即增量编译上传，上传后即刷新的开发体验
• 超低学习成本，只须记忆 2 条命令即可完成开发
• 抹平编码差异，开发中无论是gbk、gb2312、utf8、utf8-bom等编码的文件，输出时都能统一指定为utf8无bom（默认）或者gbk文件

快速上手

• 安装
  • npm install -g fis
• 三条命令，满足你的所有开发需求：
  • fis install <name>
  • fis release [options]
  • fis server <command> [options]
• 试手样例
  • 纯前端组件化方案
  • fis官网

三种语言能力扩展

• 关于三种语言能力
• 在html中：定位资源、嵌入资源、声明依赖
• 在js中：定位资源、嵌入资源、声明依赖
• 在css中：定位资源、嵌入资源、声明依赖

插件系统

• 编译过程运行原理
• 插件调用机制
• 插件扩展点列表

配置文档

• 零配置
• 使用配置文件
• 系统配置
  • project.charset
  • project.md5Length
  • project.md5Connector
  • project.include
  • project.exclude
  • project.fileType.text
  • project.fileType.image
• 插件配置
  • modules.parser
  • modules.preprocessor
  • modules.postprocessor
  • modules.lint
  • modules.test
  • modules.optimizer
  • modules.prepackager
  • modules.packager
  • modules.spriter
  • modules.postpackager
  • settings
• 内置插件运行配置
  • settings.postprocessor.jswrapper
  • settings.optimizer.uglify-js
  • settings.optimizer.clean-css
  • settings.optimizer.png-compressor
  • settings.spriter.csssprites
• 目录规范与域名配置
  • roadmap.path
  • roadmap.ext
  • roadmap.domain
  • roadmap.domain.image
• 部署配置
  • deploy
• 打包配置
  • pack

高级使用

• 基于map.json的前后端架构设计指导

更多资料

• fistool 可视化界面工具
• gois go语言组件化解决方案
• phiz PHP组件化解决方案
• spmx 通过包装fis得到适应seajs架构的集成解决方案
• sublime plugin 支持FIS编译的sublime插件，可以替代watch功能