腾讯开源前端预处理器语言图形编译工具 Koala使用指南

Posted 2020-09-08

摘要：Koala是一款预处理器语言图形编译工具，支持Less、Sass、CoffeeScript、Compass框架的即时编译。无需手动输入命令去编译，后台监听文件是否有改变，如有修改会自动进行编译，能够大大提升Web开发中的工作效率。

近期，我们对腾讯Koala团队进行了专访 ，一款预处理器语言图形编译工具，支持Less、Sass、CoffeeScript、Compass框架的即时编译。本篇文章为大家着重介绍Koala工具的使用进行讲解，以供参考。

 

Koala代码托管地址： https://code.csdn.net/Tencent/koala  

---

一、安装Koala

开发者可以直接下载安装包，或者选择从源码编译Koala，两种方式都可以。

 

1. 直接下载

 

可前往 Koala项目主页，根据系统平台下载对应的版本，Sass编译要求Windows/Linux系统且已安装好Ruby运行环境。

2. 从源码编译Koala

a. 首先克隆Koala源码到本地：

$ git clone <a href="https://code.csdn.net/Tencent/koala.git">https://code.csdn.net/Tencent/koala.git</a>

b. 下载与你系统环境相对应已编译好的node-webkit(<=0.8.x)文件 
c. 根据使用的操作系统，进行不同的操作：

 

• Windows 系统：复制 nw.exe, nw.pak, icudt.dll 到 koala/src 目录，并安装  Ruby 到koala/src/ruby目录；
• Linux系统：复制 nw, nw.pak，并安装 Ruby 环境： sudo apt-get install ruby；
• Mac OS X 系统：复制 node-webkit.app，Mac OSX 已内置 Ruby，无需额外安装。

 

 d. 最后运行nw可执行程序。

二、Koala基本操作

那如何在Koala中添加项目，如何批量处理文件？下面为大家介绍下Koala的基本操作。

Koala运行界面

• 添加项目： 拖拽文件夹到Koala界面，即可添加项目。如果项目目录下有新增文件，点击文件列表上方的刷新按钮，将自动添加新文件。
• 修改文件输出目录： 选择某个文件后，点击路径旁边的“编辑”图标，或单击右键出现操作菜单。可按下Ctrl键同时选中多个文件，然后右键操作批量设置。
• 多文件批量设置： 可像文件管理器一样，同时选择多个文件；目前功能有设置输出目录、切换自动编译、执行编译、移除文件。
• 指定编译器：如果开发者 希望使用指定的某个版本的编译器，如希望使用“Sass pre version”，此时可以打开Koala设置面板，在对应的编译器设置栏，勾选“使用系统设置”；关于“使用指定的编译器”，如果在全局环境中（终端）可以直接执行该编译器命令，如sass -h,则无需填写，否则则填写具体的执行路径。

 

 

三、详解“项目配置”

项目配置功能可以对所有项目文件进行设置，制定属于该项目的编译配置，同时以配置文件的形式保存，可以方便团队间配置同步，协作更加高效。

创建配置文件

在Koala界面左侧项目列表中选择某个项目，单击右键，“项目配置—新建配置”，然后选择相应项目类型，JS、CSS项目可以选择“默认”配置。这样，Koala将在该项目根目录下创建koala.config文件。首次创建配置文件后，右键点击项目，选择“重新载入”即可生效配置；后续修改的配置，Koala将自动读取配置并立即生效。

配置字段介绍

 

mappings (Array)：指定对应的输入目录与输出目录。

如：

 

 

"mappings": [
	{	
		"src": "path/to/source",
		"dest": "path/to/output"
	},
	{	
		"src": "path/to/source2",
		"dest": "path/to/output2"
	}
]

 

 

 

ignores (Array)：过滤文件或目录。

添加过滤规则后，Koala将过滤匹配的文件或目录。

如： "ignores": ["*.json", "*.txt", "test", "path/libs"]

 

 

options (Object) ：设置项目默认编译选项。

设置后项目中所有文件都将自动同步该配置，当然还是允许在文件编译选项区单独对文件进行设置。

 

 

customOptions(Array)

如果你需要的某些编译选项不在"options"中，你可以在"customOptions"中添加它们。

注意，请使用完整的选项名，而不是缩写，如，["--scss", ... ,"--no-cache"]。

 

 

requireLibs (Array)

指定使用的Ruby类库，将会在执行Sass命令前引入它们，相当于Sass的"--require LIB"选项。

 

---

更多内容，如怎样在Koala中添加Source Map选项、如何在Koala中安装并使用第三方Ruby库，可以参考详细使用文档： https://code.csdn.net/Tencent/koala/wikis 。