• 欢迎访问小辉博客,有访必回!广告为已更换为百度联盟,希望随手点下,虽然博客是兴趣所在,但也想有一个良性循环!请大家谅解!

AmazeUI瘦身全攻略

前端 小辉 738次浏览 已收录 1个评论 扫描二维码

AmazeUI是国内著名的一款UI,涵盖jQuery,React,Touch三个版本。AmazeUI的组件策略是移动优先,但UI的配置文件体积比较大,在移动开发的过程中50%以上的组件是不会使用的,如何精剪UI的体积,本文和大家一起分享从源代码中精剪体积的策略。

环境搭建:

如果想自定义环境组件,获得更宽松的脚手架策略,当然要搭建环境。Gulp也好,webpack也好。你需要把AmazeUI的源码本地化:你可以通过:https://github.com/amazeui/amazeui下载源码:https://github.com/amazeui/amazeui/archive/master.zip

下载源码后你可以通过npm install 命令安装全部的依赖。Js文件夹和less文件夹是我们主要精剪的目录。

2、less文件精剪攻略:

less文件夹打开后包含这AmazeUI所依赖的所有css文件。现在你获得的less文件是还没有生成css的源文件。我们后面会谈一下如何生成css文件。让我们先看一下less文件夹中几个关键的文件,也是我们需要精剪的主要部分

2.1 amazeui.less 所有依赖的主文件。

打开后会看到很多@import;less样式文件可通过 @import ‘文件路径‘; 引入外部的less文件。值得注意的是不带扩展名或带非.less的扩展名均被视为less文件;

@import可出现在任何位置,而不像css的@import那样只能放在文件第一行。

另外@import还提供了6个可选配置项(分别为reference,inline,less,css,once,multiple),用来改变引入文件的特性。语法为:  @import (reference) ‘文件路径‘; 。下面为各配置项的具体说明:

  1. @import (reference) “文件路径“;

将引入的文件作为样式库使用,因此文件中样式不会被直接编译为css样式规则。当前样式文件通过extend和mixins的方式引用样式库的内容。

  1. @import (inline) “文件路径“;

用于引入与less不兼容的css文件,通过inline配置告知编译器不对引入的文件进行编译处理,直接输出到最终输出。注意:引入的文件和当前文件会被编译为一个样式样式

  1. @import (less) “文件路径“;

默认使用该配置项,表示引入的文件为less文件。

  1. @import (css) “文件路径“;

表示当前操作为CSS中的@import操作。当前文件会输出一个样式文件,而被引入的文件自身为一个独立的样式文件

  1. @import (once) “文件路径“;

默认使用该配置项,表示对同一个资源仅引入一次。

  1. @import (multiple) “文件路径“;

表示对同一资源可引入多次。

了解@import后在看amazeui.less文件就能理解了吧,在AmazeUI没有封装前每一个组件都是单独的less文件组成,通过封装把所有配置的文件组成了我们用的 amazeui.css或经过压缩后成为我们使用的 amazeui.min.css

2.2 variables.less 文件

这个文件是整个amazeui.css中的配置文件,涉及到所有颜色,字体,文字大小。媒体查询等很多方面:

色调可以通过下图位置来更改:

还有许多可以更改的常量,官方已经分别做了注释,找到你要更改的环境常量释放你的设计天赋吧。

2.3 lessc 封装更改后的的less文件。

安装 npm install lessc即可安装

封装也很简单,可以直接通过命令行:

lessc –x  /开发环境/amazeui.less  /生产环境/amazeui.css

你也可以通过gulp等自动任务完成所有的封装。

3、js文件攻略

Js文件的封装和less文件策略很类似。建议通过:npm install amazeui命令部署amazeui这样在js文件夹下你会获得一个amazeui.js的文件。这里封装这所有amazeui中js所有依赖的模块关系,不难看出widget文件夹封装的是js组件。这些组件的依赖关系也涉及到amazeui的css文件,精剪的时候要要对症下药。把不需要的直接删除即可,然后通过命令行统一封装:

 

browserify -r /开发环境/amazeui.js:UI >/生产环境/amazeui.js

 

生成的js文件是没有被压缩的,你可以通过手动压缩,或uglifyjs进行压缩处理:

 

uglifyjs amazeui.js  -m -o amazeui.min.js

 

当然笔者这里提供的方法是依赖于第三方的工具,你也可以统一用gulp或webpack来建立自己的开发环境。


小辉博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明AmazeUI瘦身全攻略

喜欢 (12)
[cnbzzh@qq.com]
分享 (0)
小辉
关于作者:
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 学习了
    乐赚1682017-02-12 15:52 Reply Windows 10 | Chrome 49.0.2623.75