fis前端集成解决方案.doc

fis前端集成解决方案 篇一：fis入门简介 fis入门简介 前言： 本文对fis进行概要性的介绍，由于篇幅原因，不会涉及太多使用、设计上的细节。想要了解更多，可参考官方文档。本文内容梗概： 1. 什么是fis 2. 环境搭建 3. fis示例 4. 项目配置 5. 插件开发 6. 打包 7. 二次开发 8. 对比grunt 9. 写在后面 什么是? ? FIS是专为解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题的工具框架。 专注于前端构建，无需进行任何配置轻松应付常见需求。 特点 个人总结： 1. 贴近前端工程实际（前端项目的构建需求、问题基本都已经帮你考虑到了） 2. 配置合理、灵活 3. 高效 4. 易扩展 官方： 三条命令，满足大部分的构建需求（每个命令带有数量不等的参数） ? ? ? ? ? ? 跨平台：基于node搭建，可运行于windows、mac、linux等平台 快速构建：合理的构建流程设计，有效提高构建性能 性能优化：内置支持文件压缩、打包等 本地调试：内建支持的server，方便本地调试（有java、node版） 灵活扩展：插件扩展、二次开发等蛮方便的 轻松上手：上手即用是没问题的，如果希望个性化定制，需对fis的整体架构设计有一些了解（单文件编译流程、插件扩展点神马的） 环境搭建 npm install -g fis # 安装fis npm install -g lights # fis采用lights管理资源；要求node版本在v0.10.27以上 demo示例 假设项目如下，这里主要展示几种能力： 1. 资源嵌入 2. 资源定位 3. 资源优化 4. 本服务器 5. 打包 fis-first-demo/ └── src ├── css │└── main.css ├── img │├── avatar.png │└── saber.jpeg ├── index.html ├── js │├── lib.js │├── main.js │└── util.js └── saber.png 运行如下命令 fis release -o fis server start 先看看运行结果 资源嵌入 lt;script type=text/javascript src=js/lib.js?__inlinelt;/script 资源定位 下面图片，release后生成到/static/avatar.png lt;img class=avatar src=img/avatar.png width=115 height=115 / 配置文件fis-conf.js fis.config.merge({ roadmap : { path : [ { //所有的js文件 reg : #39;**.js#39;, //发布到/static/xxx目录下 release : #39;/static/$amp;#39; }, { //所有的css文件 reg : #39;**.css#39;, //发布到/static/xxx目录下 reltar{float: left;} .intro .wording{float: left; margin-left: 10px;} 优化后 .clear{clear:both}.intro{}.intro .avatar{float:left}.intro .wording{float:left} 本地服务器 fis server start --type node 项目配置 按照配置粒度划分，fis的配置主要包括几项： 1. project：项目配置，如编码、支持文件类型等 2. modules：插件配置，指明用特定的插件来处理特定类型的文件。跟settings两者需要进行区分 3. settings：针对具体插件的配置 4. roadmap：定制项目文件属性。常用的配置项为同步路径的配置（从src到dist之间的映射）、线上路径的映射。 5. pack：配置要打包的文件。并不会对文件进行实际打包操作，而是生成一份打包关系映射表map.json，如需实际打包，可根据这份表自行定制打包方案。 6. deploy：部署相关的配置。 简单例子 下面是来自官方的例子，挺详细就不展开了：/docs/api/fis-conf.html //fis-conf.js fis.config.merge({ modules : { parser : { //coffee后缀的文件使用f