Skip to content

Latest commit

 

History

History
141 lines (100 loc) · 3.84 KB

README.md

File metadata and controls

141 lines (100 loc) · 3.84 KB
Raw

安装fis

npm install -g fis

安装成功后执行 fis -h 即可看到相关开发命令帮助

安装fis的扩展插件，这个项目用到的

npm install -g fis-parser-utc
npm install -g fis-parser-coffee-script
npm install -g fis-parser-less
npm install -g fis-postprocessor-require-async
npm install -g fis-postpackager-modjs

让代码跑起来！

首先，启动内置的调试服务器：

fis server start

此时fis会启动一个精巧的jetty服务器，并且打开浏览器访问了 http://127.0.0.1:8080 ，现在这个调试环境什么也没有，接下来，我们在命令行下cd到我们下载的样例项目中：

cd todo-demo

第三步，执行fis的编译命令：

fis release

第四步，刷新浏览器，查看我们的项目。

各种功能体验

  1. 给所有资源加 md5版本戳，执行：

    fis release -m

    然后刷新浏览器，看一下源码吧！

  2. 压缩js、css、图片，执行：

    fis release -o

  3. 校验js，执行：

    fis release -l

  4. 自动csssprite，执行：

    fis release -p

    可以看到 #todo-list label 的图片都自动合并了哦

  5. 所有静态资源加域名，先修改fis-conf.js文件，去除掉 第2行 的注释，然后执行：

    fis release -D

  6. 文件监听，执行：

    fis release -w

    命令行窗口不要关闭，然后去修改源码->保存->刷新浏览器，就能看到更新的效果。

  7. 文件上传，执行：

    fis release -d remote

    就可以发布到我的一个小服务器上，然后浏览器访问： http://vm-1.chongzi.kd.io/

  8. 加域名、压缩、加md5戳、校验、csssprite、把编译好的文件产出到output目录中（其实就是随意组合使用前面提到面的参数啦）：

    fis release -Domlp -d ../output

  9. 文件监听、live-reload、同时发布到本地调试目录、outpu目录和远端服务器：

    fis release -wLd preview,remote,../output

目录规范

任何 目录规范、部署规范、编译规范 都是可配置的（配置代码），这里只介绍内置的规范。

内置的规范包括：

  1. .less 后缀的文件是less文件，编译后得到css文件。
  2. .minix.less 后缀的文件定义less的minix，编译后不会产出。
  3. .coffee 后缀的文件是coffee-script，编译后得到js文件。
  4. .tmpl 后缀的文件是underscore前端模板，左右定界符为 <% 和 %>，编译后不会产出。在js或coffee中使用 __inline('path') 函数将其嵌入到js或coffee文件中作为模板函数使用。
  5. 扔在 modules 目录下的js、css、less、coffee文件都是模块化文件，会自动包装define，自己就不要写了。使用require.async或者require加载模块的时候id与文件的对应规则是这样的：
文件 引用id 举个例子
/modules/a.js a require.async('a');
/modules/b/b.js b require.async('b');
/modules/b/c.js b/c require.async('b/c');
1. 扔在 ``lib`` 目录下的文件不被认为是模块化的，请直接在页面上使用script或link标签引用。

如果使用中遇到什么觉得诡异的地方，欢迎在 issues 留言