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


    摘要: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 

  • 相关阅读:
    微服务架构总结
    微服务-网关服务
    HttpClient-RestTemplate-Feign
    RPC和REST
    Springmvc的拦截器执行顺序及各方法作用
    秒杀系统优化方案(下)吐血整理
    秒杀系统优化方案(上)吐血整理
    分布式session的管理
    缓存设计——缓存和数据库的数据一致性
    个人理解的javascript作用域链与闭包
  • 原文地址:https://www.cnblogs.com/ertingbo/p/6672624.html
Copyright © 2020-2023  润新知