FIS3前端开发工具-使用总结

介绍

FIS是百度FEX-TEAM团队开发的前端工具。它可以对一个项目中的静态资源JS（比如JS脚本、CSS文件、图片）进行压缩。所谓的压缩是指将JS脚本和CSS文件中的空格去掉，使占用字节最小。而图片压缩后也会变小；可以将一个项目中的所有脚本合并到一个文件中，这个过程也叫做打包，当然CSS文件和图片也可以打包。

安装 FIS3

首先要安装fis，要安装fis首先得安装node.js，安装npm，然后在全局安装fis3。

npm install -g fis3

安装完成后执行 fis3 -v 判断是否安装成功，如果安装成功，则显示类似如下信息：

$ fis3 -v

 [INFO] Currently running fis3 (/Users/Your/Dev/fis3/dev/fis3)

  v3.0.0

   /\\\\\\\\\\\\\\\  /\\\\\\\\\\\     /\\\\\\\\\\\
   \/\\\///////////  \/////\\\///    /\\\/////////\\\
    \/\\\                 \/\\\      \//\\\      \///
     \/\\\\\\\\\\\         \/\\\       \////\\\
      \/\\\///////          \/\\\          \////\\\
       \/\\\                 \/\\\             \////\\\
        \/\\\                 \/\\\      /\\\      \//\\\
         \/\\\              /\\\\\\\\\\\ \///\\\\\\\\\\\/
          \///              \///////////    \///////////

　

例子

在正式介绍 FIS3 功能之前，我们给定一个简单的例子，例子下载地址 demo-simple

使用

安装好后进入命令行，进入项目根目录【FIS3 配置文件（默认fis-conf.js）所在的目录为项目根目录。】，执行命令，进行构建。

 

1.合并js脚本

cd [你的项目的绝对路径]

fis server start

然后，浏览器的URL中输入：http://127.0.0.1:8080/

可以看到你的项目已经成功部署了。

输入：

fis server open

可以打开你刚才部署的根目录

 

接下来你可以对你的项目中的静态资源进行压缩、打包等操作了。

首先你要安装一个FIS的插件。

 

进入命令行。

输入：

npm install -g fis-postpackager-simple

 

接着你需要在你的项目的根路径下新建一个文件：fis-conf.js。

//Step 1. 开启simple插件，注意需要先进行插件安装 npm install -g fis-postpackager-simple
fis.config.set('modules.postpackager', 'simple');
//通过pack设置干预自动合并结果，将公用资源合并成一个文件，更加利于页面间的共用
//Step 2.将[]里面的所有文件打包到pkg/lib.js目录里
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. 除了Step2中手动设置合并的JS脚本之外。通过Step3的配置，可以对其他的脚本进行自动合并。
fis.config.set('settings.postpackager.simple.autoCombine', true);

然后运行命令：
fis release --optimize --pack

这个命令会对JS脚本进行自动合并。

 

2.JS与CSS添加MD5版本号

修改刚才的配置文件，FIS的插件中有个是可以让产出能够支持相对路径的插件：fis3-hook-relative。具体安装使用https://github.com/fex-team/fis3-hook-relative

// 启用插件
　　fis.hook('relative');
　　// 让所有文件，都使用相对路径。
　　fis.match('**', {
　　　　relative: true
　　})

　　//加 md5

　　fis.match('*.{js,css}', {

　　　　useHash: true
　　});

　　fis.match('*.js', {
　　　　// fis-optimizer-uglify-js 插件进行压缩，已内置
　　　　optimizer: fis.plugin('uglify-js')
　　});

　　fis.match('*.css', {
　　　　// fis-optimizer-clean-css 插件进行压缩，已内置
　　　　optimizer: fis.plugin('clean-css')
　　});

　　fis.match('*.png', {
　　　　// fis-optimizer-png-compressor 插件进行压缩，已内置
　　　　optimizer: fis.plugin('png-compressor')
　　});

cd [你的项目的绝对路径]

fis3 release -d <path>

• <path> 任意目录
• fis3 release -h 获取更多参数 

构建发布到项目目录的 output 目录下

fis3 release -d ./output

构建发布到项目父级目录的 dist 子目录下

fis3 release -d ../dist

发布到其他盘(Windows)

fis3 release -d D:\output

 

参考：

http://blog.csdn.net/maoxunxing/article/details/38778019

http://fis.baidu.com/fis3/docs/beginning/release.html