fis的wiki整理的不是很好，结合最近几天的体会，整理了FIS常用的功能，加上自己对fis的理解，整理了这篇文章

FIS 和 FISP

fis是百度的开源的前端开发解决方案，另外还有个fisp（即fis-plus，前身是fis-pc），fisp可以说是百度业务定制版，主要集成（并扩展）了smarty模板，本地调试等功能。

fisp是在fis基础上做的一层封装，订制了一些 config 配置，所以一些fis的配置，在fisp里面是会自动忽略，不会生效的，比如说jswraper配置。

FIS原理

fis其实是一个 半成品 ，只有经过更多的包装（例如插件）才能发挥最大的作用，fis的核心是生成的 map.json ，很多想法可以通过 map.json 这个表来实现。比如我自己订制的require inline方式。

fisp结合 map.json 和 FISSource.class.php ，对smarty语法进行了扩展，扩展出来了 html、widget、require、script等smarty自定义标签。

想了解详情的童鞋，可以直接看下fisp的 plugin 。

FISP环境部署

安装

• 安装node环境
• 配置java环境，并放入环境变量
• 安装php环境，并且将php.exe放进环境变量

然后进入cmd，依次执行：

#安装fis-plus
$ npm install -g fis-plus
#安装fis-plus调试环境
$ fisp server install pc
# 启动fisp
$ fisp server start
# 这时应该会自动打开系统默认浏览器访问127.0.0.1
# 查看www路径
$ fisp server open
# 清理www路径，慎用，会清理掉之前安装的调试环境
$ fisp server clean

Gruntjs是前端项目构建工具，基于node的命令行工具。很多公司或者js项目都是用gruntjs来搭建，例如jQuery，twitter，Qunit等。主要功能有：

• 合并文件
• 压缩html/js/css/图片文件
• 语法检测
• 单元测试（基于Qunit）
• watch功能

相对于Ant的打包工具，grunt更加灵活，语法采用json，比xml语法更加简洁，作为前端工程师可能更喜欢写json。

GruntJS的安装

Grunt是基于nodejs的，所以安装GruntJS之前，需要保证你的电脑有nodejs环境，node环境比之前安装简单多了，现在windows平台只需要下载node安装程序，一路next就可以了。

livereload是一个web开发辅助工具，当我们修改完html、css和js的时候会自动刷新浏览器，解放码农的双手。这样在双屏切图、写js代码的时候会提高很多效率。livereload有很多版本，比如基于ruby的版本，我们今天介绍的是node+grunt+chrome插件一体化方案。

我们使用的这个livereload的基本原理是试用node开启一个websocket服务，并且检测文件变化，浏览器打开一个页面时候，引入固定的livereload.js（chrome插件会帮忙加上）会建立ws请求，当node检测到文件变化，则自动推送消息给浏览器，实现刷新。

livereload环境搭建

• nodejs安装
• grunt安装
• grunt-contrib-watch：npm install grunt-contrib-watch –save-dev
• grunt-livereload：npm install grunt-livereload –save-dev
• chrome插件：安装

项目是模块加载的，类似require.js的用法，所以简单写了一个js打包工具。
项目的模块加载和定义部分代码是这样的：

XX.define('ns',['tool/cookie'],function(){
});
//或者
XX.define('ns.ns2','tool/cookie,tool/abc',function(){
})
//或者
XX.define('ns',function(){
})

所用到的js打包工具就是扫描文件，然后匹配出来需要加载的模块，然后先加载模块代码。
主要的nodejs打包工具代码如下：

之前几天根据YUICompressor和TBCompressor整合到鼠标右键菜单自己将uglifyjs也添加到了右键菜单，下面简单记录下过程。效果如下

配置windows nodepath环境

鼠标右键我的电脑，选择属性→高级属性管理→高级选项卡→环境变量，添加新的环境变量，名字为NODE_PATH，变量值为nodejs的安装路径，例如下面

C:\Program Files\nodejs

然后保存退出

安装uglifyjs

在命令行安装uglifyjs，

npm install uglify-js -g

安装uglifyjs到鼠标右键菜单

找到第二步安装的uglifyjs的路径下的bin文件夹，例如我的安装在：

C:\Program Files\nodejs\node_modules\npm\node_modules\uglify-js\bin

然后下载uglifyjs的安装文件解压到这个文件夹

uglifyjs到鼠标右键菜单安装文件

• 双击运行install.cmd就可以安装了。
• 卸载运行uninstall.cmd就可以卸载。

主要的代码还是根据YUICompressor的安装文件改的，压缩的时候首先将源文件copy为dev作为备份，然后压缩替换原文件。例如a.js,压缩后变成a.dev.js原文件和压缩后的js文件。美化则是将美化后的代码存到bea.js，即a.js美化后为a.bea.js