forked from fex-team/fis
-
Notifications
You must be signed in to change notification settings - Fork 22
辅助开发
hefangshi edited this page Jul 21, 2014
·
1 revision
使用FIS可以方便的将各种异构语言转换为前端语言,比如说可以将CoffeeScript编译为JavaScript、Less编译为CSS、前端模板预编译等等,并且可以做到各种异构语言无缝混用,我们以Less为例演示如何使用FIS来扩展前端开发语言。
更多的语言扩展类插件可以查看更多插件
$ 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');
在fis-conf.js同目录编写一个LESS文件
body {
.container {
width: 980px;
}
}
使用发布到当前
$ fis release -wd ./
可以看到同目录下出现一个同名的CSS文件
body .container {
width: 980px;
}
由于我们添加了 -w
参数,你还可以随意修改LESS文件,FIS将会自动监听文件修改,自动编译发布CSS文件
通过文件监视功能,我们可以要求FIS在项目文件出现修改时,自动增量构建项目文件。并且增量构建是考虑了各种嵌入关系的,比如a.css文件内嵌了b.css文件,那么当b.css文件修改时,FIS会自动重新构建a.css和b.css两个文件。
可以使用快速入门中的fis-quickstart-demo试试看,首先开启文件监听功能
fis release --watch #fis release -w
随意修改项目内容,返回页面刷新即可查看到相应的变化。
我们只需要在文件监视的参数基础上添加 --live
或 -L
参数即可实现在项目文件发生修改后,自动刷新页面的功能,大幅提高页面制作效率。
fis release --watch --live #fis release -wL
随意修改项目内容,页面将会应用修改并自动刷新。
要求浏览器环境支持WebSocket。
通过配置我们可以快速的将FIS的编译结果上传至指定的文件夹甚至远程服务器与后端联调,结合文件监视、自动刷新功能我们可以做到修改文件后自动更新远程服务器内容,并刷新调试页面。详细配置可以参见deploy。
更多的辅助开发能力可以参考命令行。