默默的点滴

之前在webkit上开发一个滚动控件，需要完成的是一段文字，上下键可以滚动，且自定义滚动条。第一想法就是浏览器原生overflow：scroll，且webkit支持自定义滚动条样式：

webkit自定义滚动条样式：

后来换了个引擎，发现其他引擎不支持自定义滚动条，那就满足不了UED的要求了。来同事推荐使用IScroll，用了一下，确实比较方便，与平台无关，可操作的属性还有性能都很理想，记录一下：

首先看官方文档 https://iiunknown.gitbooks.io/iscroll-5-api-cn/content/versions.html

github地址：https://github.com/cubiq/iscroll

demo：http://cubiq.org/dropbox/iscroll4/examples/simple/

直接拿demo中的iscroll.js套到自己的工程上，一个段落就是一个li，new 一下就完事了，滚动拖动也很happy。然后发现，我按上下方向键没有响应。

IScroll按键事件绑定：

查源码看iscroll的事件处理，都在handleEvent函数里面

根本就没有keyEvent，看来偷懒是不行的，官方文档看一下，原来iscroll有5个版本，各自平台都是不一样的，demo中这个估计是移动平台用的iscroll-lite版本，移动平台根本不鸟方向键的。

去github上down下来源码，找了找，build目录下，5个版本都有。用最原始的common版本，这个版本的handleEvent就丰富多了：

然后套用上去，可以支持方向键了。中间遇到两个小问题，第一个是按键一直没反应，检查下是z-index太小，keyEvent被上层元素拿走了；第二个是只有在#warpper拿到focus的时候才响应按键，但我用的引擎不支持focus，这个也不难，页面强行绑定handleEvent：

然后整个页面随便按什么键，都可以响应了。接下来就是滚动条样式的问题了，这个也简单，跟着官方文档&样例走就行

http://lab.cubiq.org/iscroll5/demos/styled-scrollbars/

关键步骤有三个：

1.option

设置了scrollbars: 'custom'，在页面的Elements就可以找到

<div class="iScrollVerticalScrollbar iScrollLoneScrollbar" ></div>

里面还包含了

<div class="iScrollIndicator" ></div>

第一个是滚动区域，第二个是滚动条。拿到Element就好办了，css给定样式：

大功告成！

当然，IScroll不止这点功能，官方文档后面还有无限滚动等高级用法，以后用到再添加。

grunt是node环境下一个压缩、合并 js、css代码的工具，还可以做一下代码美化等。体验了一下压缩合并，还是不错的，大概流程如下：

在工程下建一个grunt目录，写两个文件 package.json-工程依赖Gruntfile.js-压缩任务

package.jsn:

Gruntfile.js:

这个Gruntfile很容易理解，想要压缩的文件以及目标文件写好就行，还有另一种自动化的写法，后面再说。

之后运行命令，grunt

出现了一个错误，网上解释

Note that installing grunt-cli does not install the grunt task runner! The job of the grunt CLI is simple: run the version of grunt which has been installed next to a Gruntfile. This allows multiple versions of grunt to be installed on the same machine simultaneously.

So in your project folder, you will need to install (preferably) the latest grunt version:

也就是说，之前装的grunt-cli只是grunt的运行环境，在工程目录下，还需要装一下grunt，运行一下命令：

之后再次运行grunt命令，又出现错误：

好吧，没有装这三个插件？原来是grunt一样，也要在工程下装，分别运行 npm install装一下，运行，成功：

工程复杂之后，肯定不会一个一个手动填文件，grunt也可以通过逻辑自动压缩js css文件，Gruntfile.js写法：

逻辑也很简单，就是把src里面的文件，压缩，生成文件会经过rename函数处理。

这里面需要注意的地方有

如果只写一个*.js，是不会递归cwd目录下的所有文件的，要递归几级写到数组中就可以了，如果不想添加什么文件，加！符号-‘！*.min.js’。

当然，这次也没有一帆风顺，运行的时候遇到错误：

报错在 最后一句，

查了半天也没找到这里有什么错误，网上搜了一下，大多数是 中括号里的uglify没有引号，跟我的情况也不一样。后来仔细检查了一下代码，发现了两处拼写错误，改了后就运行通过了，也就是说，其他错误都会报到最后一句。

做了一个小小的试验，写一个空模块

压缩后是这样的：

对，什么都没了。

 

最近有新的需求，压缩不同版本的文件，就需要开多个contact uglify任务，琢磨了一会，搞出来了，同时对grunt有了进一步的认识。

配置多任务是这么写的

r简单看一下配置文件

contact

首先配置了option，option中配置了不同文件中间增加;分隔符。

这个是contact所有任务的全局配置

后面又写了三个合并任务，分别配置下src和dest就可以了。

合并顺序就是 src中配置的顺序，*.js则按照字母排序。

uglify

uglify中配置了三个压缩任务，

压缩contact的文件

压缩所有文件并生成.min.js

最后运行

会自动加载contact和uglify中的所有任务。

来源于http://www.haorooms.com/post/qd_grunt_cssjs。