当前位置:首页>Koala教程>Koala合并压缩

Koala合并压缩

作者:微学网发布时间:2019-08-11 22:12:54

JS、CSS文件合并与文件压缩

在文件头部插入其他文件内容

// @koala-prepend "jquery.js"

// jQuery is ready
$(function(){
  // TODO
})

在文件底部插入其他文件内容

// @koala-prepend "jquery.js"
// @koala-append "other.js"

$(function(){
  // TODO
})

// the content of other.js will be combine into here

合并CSS @import 文件

@import url("reset.css");
@import "./libs/jquery.ui/jquery.ui.css";

/*For this page*/
body {}

默认不开启不开启Combine Import这个功能,需选中Combine Import选项;
开启后将合并import文件代码至源文件。
不开启Combine Import

Convert CSS images to base64

css中的图片url可转换为base编码,启用规则为在image url末尾增加参数”?base64”.

(注意base64转换仅限本地图片)

Source code:

#test {
    background: url(../img/logo.png?base64) no-repeat;
}

Output Code:

#test {
    background: url(data:image/png;base64,R0lGODlhEAAQAMQAAORHHOVS.....) no-repeat;
}

css、js压缩

  1. 点击软件左上角的+号,选择你需要压缩的css或js文件夹。
    选择你需要压缩的css或js文件夹

  2. 选中你引入的文件夹,文件夹中的内容将出现在右侧框内。如图:
    js、css压缩

注:右侧对应css,上方对应的粗体命名是你现有的css名称,下面加.min.css是压缩后的名称

  • 压缩 > 选中对应的css(如:jquery-ui.css),点击后,会弹出右侧的编译提醒。点击执行编译,文件夹中将会出现jquery-ui.min.css这个已经被压缩的文件!

css、js合并

  • 同css、js压缩的第1和第2点

  • css中多个进行合并操作。(例:现有test.css、index.css两个文件,需要将test.css融合到index中!)

  • index.css中通过@import引入test.css

    @import url("test.css");//css引入
    
  • js引入使用:// @koala-prepend “xxx.js”

    //js引入
    // @koala-prepend "index.js"
    
  • 执行编译即可!(一样的会得到如:index.min.js)