星期日 晴 8～17℃

GruntJS

grunt.js 是一个自动化构建工具，是 node.js 的一个组件。

使用 grunt.js 需要先安装 node.js，以前装 node.js 比较麻烦，现在直接下安装包来安装就可以了。

1 安装grunt

1.1 安装grunt命令行工具grunt-cli
使用 -g 全局安装，这样可以在任何一个目录里使用了。
命令:

npm install -g grunt-cli

1.2 grunt版本查看
命令：

grunt -version

2 搭建前端项目

（*以下提到的顶目根目录，也可以是项目的静态文件根目录，例如 static）

2.1 新建 package.json

package.json放在根目录下，它包含了该项目的一些元信息，如项目名称、描述、版本号，依赖包等。它应该和源码一样被提交到svn或git。

package.json内容需符合JSON语法规范，如下

{
 "name": "koudaitong-isv",
 "version": "0.1.0",
 "devDependencies": {
  "grunt": "~0.4.1",
  "grunt-contrib-jshint": "~0.3.0",
  "grunt-contrib-uglify": "~0.2.0",
  "grunt-contrib-concat": "~0.1.3",
  "grunt-contrib-watch": "~0.3.1",
  "grunt-contrib-less": "~0.5.0",
  "grunt-regarde": "~0.1.1",
  "grunt-contrib-livereload": "~0.1.2",
  "grunt-contrib-connect": "~0.2.0"
 }
}

2.2 新建 README.md 文件

用文本编辑器，里面输入 readme 内容，任意文本

2.3 安装grunt及其插件

打开命令行工具进入到项目根目录
命令：

npm install

下载的 grunt 版本及其插件版本，以 package.json 里的 devDependencies 设置为准。

2.4 新建 Gruntfile.js 文件

Gruntfile.js也是放在项目根目录下，几乎所有的任务都定义在该文件中，它就是一个普通的js文件，里面可以写任意js代码而不仅局限于JSON。和package.json一样它也要和源码一样被提交到svn或git。

Gruntfile.js由以下内容组成

1、wrapper函数，结构如下，这是Node.js的典型写法，使用exports公开API

module.exports = function(grunt) {
  // Do grunt-related things in here
};

2、项目和任务配置
3、载入grunt插件和任务
4、定制执行任务

Gruntfile.js 例子（该示例完成以下任务）：

1、合并src下的文件（ajax.js/selector.js）为domop.js
2、压缩domop.js为domop.min.js
3、这两个文件都放在dest目录下

module.exports = function(grunt) {
    // 配置
    grunt.initConfig({
        pkg : grunt.file.readJSON(‘package.json’),
        concat : {
            domop : {
                src: ['src/ajax.js', 'src/selector.js'],
                dest: ‘dest/domop.js’
            }
        },
        uglify : {
            options : {
                banner : ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n’
            },
            build : {
                src : ‘dest/domop.js’,
                dest : ‘dest/domop.min.js’
            }
        }
    });
    // 载入concat和uglify插件，分别对于合并和压缩
    grunt.loadNpmTasks(‘grunt-contrib-concat’);
    grunt.loadNpmTasks(‘grunt-contrib-uglify’);
    // 注册任务
    grunt.registerTask(‘default’, ['concat', 'uglify']);
};

2.5 执行grunt任务

打开命令行，进入到项目根目录。
命令：

grunt

2.6 命令行快捷方式

创建 cmd 的快捷方式，右键属性，在快捷方式的“起始位置”输入项目根目录，这样就不用每次都手动进入该目录了。

资料参考

• gruntjs.com – getting-started
• Gruntjs – 安装
• Gruntjs – 搭建前端项目

解决modem log is stopped提示的方法

手机root后，每次重启过一会都会出现提示：

modem log is stopped.

字面意思是“调制解调器日志记录已经停止运行”。

（有可能是某一些应用激活了该服务，偶然发现可能和墨迹天气有关）

治标不治本的方法：

“应用管理 -> 正在运行”停止该服务。

根治的方法：

向下划动屏幕，点击“modem log is stopped”提示，选中 modem log 选项，然后点击 start （不要勾选 start automatically when reboot）。重启手机。

另一个根治的方法是找到激活该服务的应用，卸掉试试（我卸了墨迹天气就好了）。

参考：http://wenku.baidu.com/view/8b4ce4f704a1b0717fd5ddaf.html

办公室健身(15)

俯卧撑，上午 45 个。

星期五 上午阵雨转阴，下午阴 8～20℃

chrome扩展开发笔记(9) 发布插件到 Chrome 网上应用店

发布地址：https://chrome.google.com/webstore/developer/dashboard

1. 需要 gmail 帐户登录。
2. 要验证帐户和发布项目，需要支付 US$5.00 的一次性开发者注册费，后续发布插件不再需要付费。
3. 付款时不能选择中国大陆信用卡，只能用国外或者香港、台湾的信用卡。

星期五 多云 6～18℃

chrome扩展开发笔记(8) 已安装扩展的存放目录

win7 的 chrome 扩展存放目录：

C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Extensions

Administrator 换成自己电脑的用户。

里面可以看到源码。

办公室健身(7)

俯卧撑，早上 40 个。

星期四 多云 3～11℃

thinkpad 禁用触摸板和小红帽的方法

见这篇日志的更新：http://www.zhugao.net/today/2013/1780.html

SwitchHosts

https://github.com/oldj/SwitchHosts

注意：使用时会替换当前 hosts 文件内容，如果系统 hosts 里有自定义内容，建议事先备份。

html5 本地存储（localStorage）的一些资料

项目不考虑 IE，终于可以无顾忌的使用 html5 了。

localStorage 的一些参考资料：

• HTML 5 Web 存储
• 深入HTML5: HTML5 本地存储( Local Storage )的前世今生（一）
• 深入HTML5: HTML5 本地存储( Local Storage )的前世今生（二）
• html5之本地存储—JSON对象的使用

让notepad++支持less语法高亮

1. 设置 -> 语言格式设置 -> 语言里找到CSS，在自定义扩展名输入框中填入less。
2. 重启notepad++，重新打开一个less文件。

参考：http://www.smuwcwt.com/archives/697

办公室健身(6)

俯卧撑，早上 50 个。

星期三 中雨转阴 2～11℃

chrome扩展开发笔记(7) 内容安全策略（CSP）

如果使用 setInterval 或 setTimeout 可能会报以下错误：

Refused to execute JavaScript URL because it violates the following Content Security Policy directive: "script-src ‘self’ chrome-extension-resource:".

解决方法是 function 不要以字符串的形式传入，例如：

setInterval("fn()", 1000)
setTimeout("fn()", 1000)

似乎也不能用匿名函数传入（不确定），例如：

setInterval(function(){}, 1000)

统一改成以下形式：

setInterval(fn, 1000)
setTimeout(fn, 1000)

参考：

http://open.chrome.360.cn/extension_dev/contentSecurityPolicy.html

https://sites.google.com/site/crxdoczh/reference/formats/manifest/contentsecuritypolicy

http://t.qq.com/p/t/211198078314976

星期日 阴 5～14℃

解决ThinkPad鼠标串动问题（禁用触摸板和小红帽的方法）

2013-3-14 更新

外接USB鼠标后，如果在操作时不小心触到触摸板，相当于两个鼠标同时使用，引起鼠标失控（串动）。

进入：

控制面板 – 鼠标 – UltraNav

（如果没有 UltraNav 选项卡，则需要安装 UltraNav鼠标驱动，选择对应的 thinkpad 型号查找鼠标驱动）

禁用触摸板的方法：

把“启用 TouchPad”前的勾取消。

禁用小红帽的方法：

把“启用 TrackPoint”前的勾取消。

不过这两个功能不能同时禁用。可以按下面的方法设置，以更保险的不让“鼠标串动”的现象发生：

 先禁用触摸板功能，然后点小红帽功能边上的“设置”按钮，把滑尺移到“重按”的一端。

参考：http://zhidao.baidu.com/question/496847014.html

2013-3-16 更新：

今天发现重启后，触摸板又被激活了，要重新进入控制面板。

原因：

尊敬的联想用户您好，重新启动后触摸板会重新启动，您需要在控制面板–鼠标–触摸板选项中重新设置即可。此情况是为了避免在外出携带时，没有鼠标，避免造成无法使用的问题。

参考：http://zhidao.baidu.com/question/528025627.html

找了个 BIOS 禁用触摸板的方法：

进入BIOS > Config > Keyboard/Mouse > TouchPad，设置为Disabled

参考：http://thinkpad.baike.com/article-325663.html

但是发现我的 E430c 在 BIOS 里没有找到这个 TouchPad 这个选项。

没办法，只好进控制面板，把“鼠标”快捷方式拖到开始菜单的“启动”项里，这样每次开机会自动打开鼠标控制面板，直接关闭面板就可以了，不用设置。

chrome扩展开发笔记(6) notification（桌面通知）

第一次开发chrome扩展，摸索，现学现用，花了大约五天时间完成我的第一个chrome扩展，比预计的时间延迟了两天。

今天再把 notification 总结一下。

1、加载 html

可以使用 webkitNotifications.createHTMLNotification 加载 html 页面

例：

var notification = webkitNotifications.createHTMLNotification(‘notification.html’);

2、对输入兼容性不好

例如在 notification 里放一个 textarea，只有当前窗口是 chrome 时才可以顺利输入，如果当前窗口是其他程序，则不能获取到 textarea 输入焦点。

3、如何只弹出一个桌面通知

先定义一个标记状态，然后使用 onclose 事件，关闭时改变标记状态。

例：

var notify_is_close = true,
 notification = null,
 b_interval;

function init() {
 b_interval = setInterval(function () {
  if (notify_is_close) {
   notification = webkitNotifications.createHTMLNotification(‘../notification.html’);
   notify_is_close = false;
   notification.onclose = function () {
    notify_is_close = true;
   }
   notification.show();
  }
 }, 3000);
}

init();

4、在 popup 里关闭 notification

接上例，在 background.js 里定义一个关闭桌面通知的 fn

function closeNotification() {
 notification.cancel();
 notify_is_close = true;
}

然后在 popup.js 里可以通过 getBackgroundPage() 调用这个 fn

chrome.extension.getBackgroundPage().closeNotification();

关于 notification 的详细参考：

http://open.chrome.360.cn/extension_dev/notifications.html

http://dev.chromium.org/developers/design-documents/desktop-notifications/api-specification

在家健身(65)

• 卷腹 50*2

以前的日志里写“仰卧起坐”，后来听说更准确的词是“卷腹”（和上学时体育课的“仰卧起坐”区分开）。

星期六 晴转多云 8～30℃

chrome扩展开发笔记(5) 关于 manifest_version

manifest.json 里的 manifest_version 字段。

manifest_version

用整数表示manifest文件自身格式的版本号。从Chrome 18开始，开发者应该（不是必须，但是2012年底左右就必须了）指定版本号为2（没有引号），如下所示：

"manifest_version": 2

manifest版本1从Chrome 18才开始逐步被弃用，版本2目前并不是必须的，但预计我们将在2012年底强制只支持版本2。还没有准备好支持manifest版本2的扩展、应用和主题，可以明确指定版本1，或者索性不提供本字段。

参考：http://open.chrome.360.cn/extension_dev/manifest.html#manifest_version

manifest_version 设为 2 后，有一些旧的字段不能使用。

比如，原来的

"background_page": "background.html"

要改成

"background": { "page": "background.html" }

另外，也不能直接在 html 上写 js，要用 src 引入 js 文件。

办公室健身(4)

俯卧撑 40 个，上午十点。

星期四 晴 7～25℃

chrome扩展开发笔记(3) 打开一个新标签，在扩展图标上显示数字

打开一个新标签

前两天用 chrome.tabs.create 方法，今天发现一个快捷方法，直接用 <a> 链接，不过 <a> 标签上要加 target="_blank"，这个很重要。

用 <a> 标签还有一个好处，当你不在使用 chrome，点击 notification 里的链接，也仍然可以用 chrome 打开一个新标签，即使电脑的默认浏览器不是 chrome.

在扩展图标上显示数字

例

chrome.browserAction.setBadgeText({text: String(111)});
chrome.browserAction.setBadgeBackgroundColor({color:[25, 135, 0, 250]});

详细参考：http://open.chrome.360.cn/html/dev_browserAction.html#method-setBadgeBackgroundColor

办公室健身(2)

今天觉得手脚有点酸。有个同事说经常加班又没运动，会导致肌肉萎缩引起手脚酸。

听他这么一说，赶紧做几个击掌俯卧撑。

星期三 晴 7～23℃

chrome扩展开发笔记(2) Manifest文件

http://open.chrome.360.cn/extension_dev/manifest.html

name、version、manifest_version 是必填字段，另外，permissions 也是一个重要字段。