npm install -g fis
安装成功后执行 fis -h
即可看到相关开发命令帮助
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
第四步,刷新浏览器,查看我们的项目。
-
给所有资源加
md5版本戳
,执行:fis release -m
然后刷新浏览器,看一下源码吧!
-
压缩js、css、图片,执行:
fis release -o
-
校验js,执行:
fis release -l
-
自动csssprite,执行:
fis release -p
可以看到
#todo-list label
的图片都自动合并了哦 -
所有静态资源加域名,先修改fis-conf.js文件,去除掉
第2行
的注释,然后执行:fis release -D
-
文件监听,执行:
fis release -w
命令行窗口不要关闭,然后去修改源码->保存->刷新浏览器,就能看到更新的效果。
-
文件上传,执行:
fis release -d remote
就可以发布到我的一个小服务器上,然后浏览器访问: http://vm-1.chongzi.kd.io/
-
加域名、压缩、加md5戳、校验、csssprite、把编译好的文件产出到output目录中(其实就是随意组合使用前面提到面的参数啦):
fis release -Domlp -d ../output
-
文件监听、live-reload、同时发布到本地调试目录、outpu目录和远端服务器:
fis release -wLd preview,remote,../output
任何 目录规范
、部署规范
、编译规范
都是可配置的(配置代码),这里只介绍内置的规范。
内置的规范包括:
.less
后缀的文件是less文件,编译后得到css文件。.minix.less
后缀的文件定义less的minix,编译后不会产出。.coffee
后缀的文件是coffee-script,编译后得到js文件。.tmpl
后缀的文件是underscore前端模板,左右定界符为<%
和%>
,编译后不会产出。在js或coffee中使用__inline('path')
函数将其嵌入到js或coffee文件中作为模板函数使用。- 扔在
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'); |
如果使用中遇到什么觉得诡异的地方,欢迎在 issues 留言