FIS是专为解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题的工具框架,相比gulp和grunt更傻瓜化,上手更容易,最近抽空学习了一下,分享一下心得。
FIS官网: http://fis.baidu.com/
FIS开发文档API:http://fis.baidu.com/docs/beginning/getting-started.html
慕课网FIS教程: http://www.imooc.com/learn/220
一、fis安装
npm install -g fis 全局安装fis
这里一定要全局安装,不然如果我们--save-dev 安装fis 然后--save-dev 安装lights会报错,其实这样全局安装也有好处,就是我们可以全局用fis命令。
2.安装ligths包管理器
npm install -g lights
文档https://github.com/fex-team/lights/blob/master/doc/node_module.md
Lights提供的包管理功能不仅能够通过简单命令就完成一系列操作,同时提供了私有仓库供产品线维护私有资源。
使用npm安装Lights (注意已安装的请更新至0.0.86及以上版本)。
3.获取示例
lights install fis-quickstart-demo
#进入DEMO目录 cd fis-quickstart-demo
#编译并发布DEMO fis release
#命令启动FIS的本地调试服务器功能对构建发布的项目进行预览调试 fis server start
这里注意一下:我们可以把最近的静态资源那里,fis-conf.js,fis-conf-no-std.js,fis-conf-timestamp.js,package.json移入自己的项目里也可以实现fis的自动化处理,输出的文件到output里面含义map.json对应处理文件路径的依赖关系。
4.资源压缩
资源压缩一直是前端项目优化中非常重要的一环,使用FIS我们无需任何配置,只需要一个命令就可以完成压缩工作。
fis release --optimize //一行密令压缩 fis release --optimize --d ../output //输出文件到相对项目的output文件
5.FIS默认的产出目构录
FIS构建并不会修改源代码目录中的内容,而是拥有独立的产出的目录,FIS默认的产出目构录可以通过 fis server open 打开,你也可以通过 fis release -d path/to/output 指定你希望的输出目录
打开产出文件目录:
fis server open
发布到项目根目录的output目录下, 注意,这里的output其实是一个内置的部署配置名,而不是一个目录名。
fis release -d output
发布到相对 工作目录
的路径
fis release -d ../output
发布到绝对路径:
fis release -d /home/work/ouput
# win
fis release -d d:/work/output
使用配置文件的 deploy节点配置 进行发布,此配置可将代码上传至远端
fis release -d remote
6.添加文件版本
FIS能够根据静态资源的内容自动生成文件版本,自动更新资源引用路径,解决缓存更新问题,告别手动更新时间戳。
我们通过开启 --md5 参数,为项目中的静态资源添加md5版本号
$ fis release --optimize --md5 # fis release -om
7.设置打包
FIS可以通过pack来进行资源文件的合并,比如我们需要将DEMO中的公共库文件打包在一起,可以修改fis-conf.js配置,加入pack配置
//Step 1. 取消下面的注释开启simple插件,注意需要先进行插件安装 npm install -g fis-postpackager-simple fis.config.set('modules.postpackager', 'simple'); //通过pack设置干预自动合并结果,将公用资源合并成一个文件,更加利于页面间的共用 //Step 2. 取消下面的注释开启pack人工干预 fis.config.set('pack', { 'pkg/lib.js': [ '/lib/mod.js', '/modules/underscore/**.js', '/modules/backbone/**.js', '/modules/jquery/**.js', '/modules/vendor/**.js', '/modules/common/**.js' ] }); //Step 3. 取消下面的注释可以开启simple对零散资源的自动合并 fis.config.set('settings.postpackager.simple.autoCombine', true); //Step 4. 取消下面的注释开启图片合并功能 fis.config.set('roadmap.path', [{ reg: '**.css', useSprite: true, //合并雪碧图 useHash:true //使用md5 }]); fis.config.set('settings.spriter.csssprites.margin', 20);
8.插件安装fis-postpackager-simple进行打包处理
fis插件的安装分为两步,首先我们需要通过npm包管理工具进行插件安装
$ npm install -g fis-postpackager-simple
插件安装到本地后,我们还需要通过项目配置文件开启插件,修改项目根目录下的fis-conf.js配置,开启fis-postpackager-simple插件
$ cd fis-quickstart-demo $ vi fis-conf.js #vi是linux下的文本编辑器,windows用户可以选用任意文本编辑器对fis-conf.js文件进行编辑。 //file : fis-conf.js fis.config.set('modules.postpackager', 'simple');
9.应用打包
为了开发调试时更加方便 fis release 默认不会合并资源,在指定了 --pack 参数后,FIS才会进行打包合并处理。
$ fis release --optimize --md5 --pack # fis release -omp
10.自动打包
利用simple插件,我们还可以按页面进行自动合并,将没有通过pack设置打包的零散资源自动合并起来。
//file : fis-conf.js //开启autoCombine可以将零散资源进行自动打包 fis.config.set('settings.postpackager.simple.autoCombine', true); 再次运行FIS构建项目 $ fis release -omp
11.合并图片
在FIS中,如果样式文件中引用图片时,添加了 ?__sprite query,那么将样式文件使用 pack 设置进行合并后,不仅仅会合并样式文件,还会将所有标识了合并的图片进行合并处理。
我们通过 pack 设置,将所有样式文件合并为 aio.css
fis.config.set('pack', { '/pkg/lib.js': [ 'js/lib/jquery.js', 'js/lib/underscore.js', 'js/lib/backbone.js', 'js/lib/backbone.localStorage.js', ], '/pkg/aio.css': '**.css' }); 再次运行FIS构建项目 $ fis release -omp
12.fis自动化文件监听,自动刷新
文件监视
通过文件监视功能,我们可以要求FIS在项目文件出现修改时,自动增量构建项目文件
fis release --watch #fis release -w
自动刷新
我们只需要在文件监视的参数基础上添加 --live 或 -L 参数即可实现在项目文件发生修改后,自动刷新页面的功能,大幅提高页面制作效率。
fis release --watch --live #fis release -wL #要求浏览器环境支持WebSocket
大体上就学到了这些同学,用过之后,整体感觉fis自动化,比较适合要求快速开发的项目,我们静态开发,然后用fis进行压缩,加版本好,然后获取发布文件修复路径,删除配置文件发布,就ok了。以后我也将结合fis、grunt、gulp一起来使用,我想会很棒。