[fis入门简介.docxVIP

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