FIS的基本命令:

  • fis install: 命令安装fis仓库提供的各种 组件、框架、示例、素材、配置等 开发资源。
  • fis release: 命令用于编译并发布的你的项目,拥有多个参数调整编译发布操作。
  • fis server: 命令可以启动一个本地调试服务器用于预览fis release产出的项目。

安装

FIS使用Node.js开发,以npm包的形式发布。因此使用FIS需要先安装Node.js,再通过npm安装命令进行FIS安装。

npm install -g fis #全局安装,一台电脑只需一次

示例

在介绍FIS的主要功能前,需要先准备一个示例项目。我们可以使用Lights包管理安装,也可以从Github获取。

$ npm install -g lights #要求node版本在v0.10.27以上
$ lights install fis-quickstart-demo

本地预览

首先我们可以通过 fis server start 命令启动FIS的本地调试服务器功能对构建发布的项目进行预览调试

$ fis server start

注意

  • 如果8080端口被占用,可以通过 fis server start -p [port] 指定新的端口。

  • 如果没有java、php环境,可以通过 fis server start --type node 启动Node版fis server。

  • 命令执行后内置服务器会一直运行,可以通过 fis server stop 命令关闭内置服务器。

本地调试服务器启动成功后,就会自动打开 http://127.0.0.1:8080 ,但是此时服务器内没有任何内容。我们还需要通过FIS发布DEMO项目才能进行预览

$ cd fis-quickstart-demo #进入DEMO目录
$ fis release #编译并发布DEMO

fis release 命令会将编译后的项目发布至本地调试服务器,再次刷新浏览器页面,我们就可以看到fis-quickstart-demo项目的主页了。

资源压缩

资源压缩一直是前端项目优化中非常重要的一环,使用FIS我们无需任何配置,只需要一个命令就可以完成压缩工作。

$ fis release --optimize # fis release -o

添加文件版本

我们通过开启 --md5 参数,为项目中的静态资源添加md5版本号

$ fis release --optimize --md5 # fis release -om

FIS默认的产出目录可以通过 fis server open 打开,详情可以参考FAQ

资源合并

FIS可以通过pack来进行资源文件的合并,比如我们需要将DEMO中的公共库文件打包在一起,可以修改fis-conf.js配置,加入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'
    ]
});

为了开发调试时更加方便 fis release 默认不会合并资源,在指定了 --pack 参数后,FIS才会进行打包合并处理。

$ fis release --optimize --md5 --pack # fis release -omp

LESS编译

安装插件

npm install -g fis-parser-less

开启插件

//file: fis-conf.js

//后缀名的less的文件使用fis-parser-less编译
//modules.parser.less表示设置后缀名为less的文件的parser,第二个less表示使用fis-parser-less进行编译
fis.config.set('modules.parser.less', 'less');
//将less文件编译为css
fis.config.set('roadmap.ext.less', 'css');

推荐使用merge写法,方便扩展。(等价)

fis.config.merge({
    modules : {
        parser : {
            less : ['less']
        }
    },
    roadmap : {
        ext : {
            //less后缀的文件将输出为css后缀
            //并且在parser之后的其他处理流程中被当做css文件处理
            less : 'css'
        }
    }
});