kun的记事本 - js&html&css&php

Mac下使用YUICompressor压缩js和css

作者：kun10 发布时间：April 19, 2011 分类：工具箱,MAC

最近入手了Mac，要用Mac来做前端开发一方面是一件装X的活，另外也是挑战自己动手能力的好机会。

入手mac后一直以来的困惑是，如何用它来进行前端代码的压缩，在此之前一直在windows平台使用集成好的yuicompressor来做压缩。
到了mac下面就得进行命令行操作了。

最初使用的方式是最笨拙的一种方式：
下载了yuicompressor的jar和依赖，配置好JAVA_HOME
使用java -jar /path/to/yuicompressor.jar path/to/file.js -o path/to/output --charset=gb18030(taobao的编码)

很明显，这种方式用多了肯定是想砸自己的电脑了:(

于是我巨想设计一种命令，
形如：cmd filename.js
运行后即可在同目录生成一个filename-min.js

由于不是很熟悉linux命令，请教了PE团队的飘零同学，于是乎产生了一个yui.php文件
它接受一个文件名参数，并调用yuicompressor.jar来做压缩

调用的时候使用php path/to/yui.php /path/to/filename.js即可

使用alias简化一下这个命令
alias yui ="php /path/to/yui.php"
调用就可以变成
yui path/to/filename.js

后来问了玉伯，才得知原来kissyteam在github的kissy-tools仓库里面已经有了mac版本的csh脚本用于调用yuicompressor.jar

yuicompressor.csh 调用了compressor.csh,后者内容如下:
原来还是明爷写的

#!/bin/tcsh
#
# TCSH Script for YUI Compressor
#
# @author mingcheng
# @date   2009-12-23
# @link   http://www.gracecode.com/

# Jar file path
set COMPRESSOR_JAR = "yuicompressor.jar"

# Command extra params
set EXTRA_PARAMS = ""

# Error single
set ERROR_NO_JAVA  = 5
set FILE_NOT_MATCH = 10
set JAR_NOT_EXIST  = 15
set COMPRESS_FAILD = 20

# Check Java wether installed
if (`printenv JAVA_HOME` == "") then 
    echo "JAVA_HOME is missing, maybe Java SDK not installed?"
    exit $ERROR_NO_JAVA
endif

# reset jar file with the same path by script 
set -r COMPRESSOR_JAR = "`dirname $0`/$COMPRESSOR_JAR"

# check $COMPRESSOR_JAR whether exit
if (-r $COMPRESSOR_JAR != 1) then
    echo "$COMPRESSOR_JAR not exist"; exit $JAR_NOT_EXIST
endif

# Check input file @todo check file type
if ($1 == "" || -r $1 != 1) then
    echo "file '$1' not exist, or '$1' is not javascript/css file"
    exit $FILE_NOT_MATCH
endif


# Generate compressed file
set compressed_file = `echo $1 | sed "s/\(\.*\)\(\.[css|js]\)/\1-min\2/"`

# Run YUI Compressor
java -jar $COMPRESSOR_JAR $EXTRA_PARAMS $1 -o $compressed_file

# Is success?
if (-r $compressed_file) then
    set from_size = `stat -f %z $1`
    set to_size   = `stat -f %z $compressed_file`
    echo "finished, compressed $1($from_size bytes) to $compressed_file($to_size bytes)."
    exit 0
else
    echo "compress faild"; exit COMPRESS_FAILD 
endif

# vim: set et sw=4 ts=4 sts=4 fdm=marker ff=unix fenc=utf8 nobomb:

于是下之。。。
然后
alias yui="csh yui-compressor.csh"
调用和前面的php版本的脚本一样的

yui filename.js

yui filename.css

这样基本上可以用了已经。

不过后来又发现alias在进程结束后，yui命令就失效了。

于是把alias这句命令写在自己的~/.profile文件里面，保证每次进入终端直接使用。
对alias不太明白的同学可以man一下alias+百度一下。

事情的始末大致就是这样。。。

再后来，我发现mac版本下面的csh脚本和windows下面的cmd还有一些差异，相比windows版本做了更多的容错处理。
windows版本的cmd脚本先调用了yuicompressor.jar,之后又调用了native2ascii来处理一些非gbk编码的特殊情况。。。
具体的可以参考kissy-tools里面的yuicompressor.cmd里面的注释。
可见，mac下面不管是php脚本还是csh脚本都还要在多做一些调整。（p.s.今天才发现飘零前两天已经完成了php版本的compressor脚本）
那我还是看看有时间试着看看能不能改一下csh好了。
- EOF -

vim简明教程

作者：kun10 发布时间：December 20, 2010 分类：工具箱

Vim简明教程

Vim

View more presentations from amdgigabyte.

想学习Vim的人一定在网上搜罗了很多“同名”的vim的教程，作为一个入门级向中级晋级的Vim前端选手，对于教程里面的内容我是这样安排的。

1、 Vim的简介（个人觉得可以不了解）
2、 Vim的几个简单操作，一些有意思的东西
3、 Vim的几种模式
4、 Vim的vimrc文件配置
5、前端的Vim该如何配置

一、 Vim的简介

http://www.vim.org/about.php 官网是这样介绍vim的，介绍是鹰文的，配有高清插画。爱好翻译的同学自己可以看。

作为前端为什么我会选择vim呢？
偶然的机会…，我..（各种装X…严重的吸引了我，至少该学学吧）
Vim == Vi improved
Vim被称为是程序员的编辑器，它甚至可以被打造成一个类似ide。但是对于新手而言，他往往像是一匹脱缰的野马，要驾驭好它需要耐心。

我从向往使用到真正使用也花了一些时间的。

如何下载vim：
linux用户可以直接在terminal里面使用sudo apt-get install vim-gnome(ubuntu)
Windows用户可以在官网下载最新的7.3版本的gvim

二、简单的操作入门

一般来说简明教程都会说，我们来做几个简单的操作。。。
是的，这里我举几个简单的vim操作，先给大家演示一下：

2.1 上下左右的移动

kjhl,当然你也可以使用键盘的方向键来移动，但是使用kjhl绝对有好处，如果你偶尔需要使用linux下面的vi，你会发现习惯使用kjhl会让你在vi下面不至于晕头转向。有一个有意思的插件，让你练习上下左右。有请vim俄罗斯方块。
实际上，你还可以加上数字键来移动，2j就是向下移动两行，2h就是向前移动两个字符。

2.2 更多的移动

w 表示移动到后一个单词开头
b 表示移动到前面一个单词开头
gg 移动到全文的开始
G 移动到全文的结束
^（home按钮）移动到一行的开始
$（end按钮）移动到一行的最后
H 移动光标到本屏的开头
L 移动光标到本屏的最后
Ctrl + F 下翻一屏
Ctrl + B 上翻一屏
:n或者nG 移动到第n行

2.3 其他的一些常用命令

nyy 复制（Yank）n行
y$ 复制到行尾
yaw 复制一个字符
dd 删除、剪切一整行（如果删除后使用p粘贴，dd表现的就是剪切）
p 粘贴
p[ 粘贴在光标前
p] 粘贴在光标后

缺了点啥？
保存文件？关闭命令？
:w
:q
合体:wq
强制一个命令加上！
:wq!
....

三、工作模式

1、普通模式：

我们进入vim的时候就是普通模式，在gvim下面普通模式的直观表现可以说是光标是块状的。
大多数情况我们发起命令都是在普通模式下面进行的
例如前面的移动命令、yy（yank）、dd（cut）等。
另外普通模式是切换其他几种模式的基础。
如何回到普通模式，在其他模式下面按ESC就可以回到普通模式。
普通模式的一些有用命令：

w 切换窗口（在切分屏幕以后的操作）

按方向切换窗口

上一个window

下一个 window

2、插入模式

按a或者i，vim就进入了插入模式，这时候按键盘上面的字符键就会在文本区域输入文字。

3、命令模式

在普通模式下面按英文冒号:进入命令模式，在命令模式下面的命令也有很多，
例如:wq、:tabnew、:vs等。
命令模式里面常用的命令：
:tabnew/:tabe
:tabn/tabnext
:tabp/:tabprev
:vs/:veticalsplit
:split
在普通模式进入命令模式然后输入命令是很常见的一种操作。

4、查找模式

按/+要查询的字符串回车 vim就会向下查询匹配的字符串。
可以使用正则来匹配文本。

5、选择模式

在普通模式下面按v，进入选择模式。选择模式里面可以利用各种移动命令移动光标，从而完成对文本的选取。选完文本可以对其进行替换操作（s）、删除操作（d）、复制操作（y）等。

6、记录模式

按q可以进入记录模式，此模式会记录接下来你的操作，往往我们可以利用记录模式来记录一段动作。
记录模式允许你使用单个字符（a~z1~0A~Z）来记录一系列的操作。
在普通模式按qa进入以a为标记的记录模式，此时我们输入几个文字，按ESC，再按q结束记录。就完成了简单的输入这几个文字的动作的记录。要重放这一操作，只需要按输入@a就行。

四、如何提高工作的效率

配置你的_vimrc，加上各种好用的插件，让他有个“ide”该有的样子。

这里主要是在windows下面配置vim，linux下面还是类似的。
什么事vimrc，从几方面来配置一个vim呢？
每个人有自己的想法，下面说说我的想法
首先作为一个新手，你可以从使用一套成熟的vimrc配置开始你的vim之旅，配合一些已设定的快捷键和vim本身的按键来编辑js，html，css
我来说说一个前端的vim里面应该有的一些配置:
正确的文件编码、好看（配色）、使用方便（快捷键）、用vim写的代码要符合规范，有一定的编码辅助工具。
Vimrc就是vim用户自定义的配置文件。
用windows的习惯使用vim：mswin.vim
鼠标可用：mouse=a
设定编码：fenc、fencs、enc
设定颜色：colorscheme=railscasts
快捷键：根据模式来区分快捷键 map
自动补全：dict
模板：tpl
文件树查看器：NERDTree （download it and copy to plugin）
Jslint
Zencoding
YUICompressor
其他的好工具：
Vimwiki（如何安装插件）
五、有助于你学习的资料
Vimmy（随手参考书 for iphone）
:help
http://www.vim.org
明城的pdf: http://www.gracecode.com/archives/274/
Google & Baidu！

几款ubuntu下面的软件集合

作者：kun10 发布时间：September 12, 2010 分类：工具箱

周末花了点时间在linux上面，给本本装了ubuntu10.04，的确是挺不错的感觉。
在此过程中找了几款有意思的插件。

Mac4Lin

功能：

把linux打扮成mac

link:http://sourceforge.net/projects/mac4lin/里面高仿了mac的不少东西，包括可以使用触摸板双指来代替鼠标滚动操作。装完之后还是很让人兴奋的。

F.lux

功能:

调节电脑屏幕的色温，保护眼睛

link:http://www.makeuseof.com/tag/flux-linux-sports-simple-gui-linux/

Compiz

功能：

装扮ubuntu,3D桌面

这个插件是ubuntu自带的，不过默认的情况下面可能没有装compiz-config，这时候需要我们做一下设置


~$:sudo apt-get install compizconfig-settings-manager #安装下载设置包

安装完了你就可以在"系统"->"首选项"->"CompizConfig"里面看到

gvim

功能：

强大的文本编辑器

一般我用这个编辑器来写前端的代码，用的配置的明城的vimrc（不过他的配置在linux下面要做一些小小的调整），觉得配得挺好的，直接拿来就用了，你感兴趣可以去看看


~$:sudo apt-get install vim

~$:sudo apt-get install vim-gtk

~$:sudo apt-get install vim-gnome

装过上面的三个就可以在linux下面使用基本的vim或是gvim了，之后把下载来的配置文件解压到/etc/vim/下面，做这个解压需要root权限，解压完后把压缩包里面的_vimrc覆盖原目录里面的gvimrc和vimrc，把vimfiles下面的文件夹全部复制到/etc/vim这个目录下面，这样vim的插件就工作正常了。

tips：修改桌面图标的大小

在ubuntu桌面，按“Alt+F2”组合键，会弹出一个名为“运行应用程序”的窗口，输入“gconf-editor”，然后按回车键，弹出一个配置编辑器的窗口，类似于windows的注册表编辑器。依次展开“/apps/nautilus/icon_view”，在“icon_view”的右边配置里面找到“default_zoom_level”，然后双击打开他，默认的值是“standard”，(此处可以根据自己的要求改：Small 是小图标；standard是标准图标；large是大图标)，这个修改是实时的，改了之后，确定即可。此条tip原文

Ubuntu下面配置LAMP

link:这里讲解的很详细

未完，待续～～～～

vim编码设置疑问

作者：kun10 发布时间：August 1, 2010 分类：工具箱

vim 编码方式的设置

和所有的流行文本编辑器一样，Vim 可以很好的编辑各种字符编码的文件，这当然包括UCS-2、UTF-8 等流行的 Unicode 编码方式。然而不幸的是，和很多来自 Linux 世界的软件一样，这需要你自己动手设置。

Vim 有四个跟字符编码方式有关的选项，encoding、fileencoding、fileencodings、termencoding (这些选项可能的取值请参考 Vim 在线帮助 :help encoding-names)，它们的意义如下:

encoding

Vim 内部使用的字符编码方式，包括 Vim 的 buffer (缓冲区)、菜单文本、消息文本等。默认是根据你的locale选择.用户手册上建议只在 .vimrc 中改变它的值，事实上似乎也只有在.vimrc 中改变它的值才有意义。你可以用另外一种编码来编辑和保存文件，如你的vim的encoding为utf-8,所编辑的文件采用cp936编码,vim会自动将读入的文件转成utf-8(vim的能读懂的方式），而当你写入文件时,又会自动转回成cp936（文件的保存编码).

fileencoding

Vim 中当前编辑的文件的字符编码方式，Vim 保存文件时也会将文件保存为这种字符编码方式 (不管是否新文件都如此)。

fileencodings

Vim自动探测fileencoding的顺序列表，启动时会按照它所列出的字符编码方式逐一探测即将打开的文件的字符编码方式，并且将 fileencoding 设置为最终探测到的字符编码方式。因此最好将Unicode 编码方式放到这个列表的最前面，将拉丁语系编码方式 latin1 放到最后面。

termencoding

Vim 所工作的终端 (或者 Windows 的 Console 窗口) 的字符编码方式。如果vim所在的term与vim编码相同，则无需设置。如其不然，你可以用vim的termencoding选项将自动转换成term的编码.这个选项在 Windows 下对我们常用的 GUI 模式的 gVim 无效，而对 Console 模式的Vim 而言就是 Windows 控制台的代码页，并且通常我们不需要改变它。

好了，解释完了这一堆容易让新手犯糊涂的参数，我们来看看 Vim 的多字符编码方式支持是如何工作的。

1. Vim 启动，根据 .vimrc 中设置的 encoding 的值来设置 buffer、菜单文本、消息文的字符编码方式。

2. 读取需要编辑的文件，根据 fileencodings 中列出的字符编码方式逐一探测该文件编码方式。并设置 fileencoding 为探测到的，看起来是正确的 (注1) 字符编码方式。

3. 对比 fileencoding 和 encoding 的值，若不同则调用 iconv 将文件内容转换为encoding 所描述的字符编码方式，并且把转换后的内容放到为此文件开辟的 buffer 里，此时我们就可以开始编辑这个文件了。注意，完成这一步动作需要调用外部的 iconv.dll(注2)，你需要保证这个文件存在于 $VIMRUNTIME 或者其他列在 PATH 环境变量中的目录里。

4. 编辑完成后保存文件时，再次对比 fileencoding 和 encoding 的值。若不同，再次调用 iconv 将即将保存的 buffer 中的文本转换为 fileencoding 所描述的字符编码方式，并保存到指定的文件中。同样，这需要调用 iconv.dll由于 Unicode 能够包含几乎所有的语言的字符，而且 Unicode 的 UTF-8 编码方式又是非常具有性价比的编码方式 (空间消耗比 UCS-2 小)，因此建议 encoding 的值设置为utf-8。这么做的另一个理由是 encoding 设置为 utf-8 时，Vim 自动探测文件的编码方式会更准确 (或许这个理由才是主要的 ;)。我们在中文 Windows 里编辑的文件，为了兼顾与其他软件的兼容性，文件编码还是设置为 GB2312/GBK 比较合适，因此 fileencoding 建议设置为 chinese (chinese 是个别名，在 Unix 里表示 gb2312，在 Windows 里表示cp936，也就是 GBK 的代码页)。

转载自http://hi.baidu.com/wudengyong/blog/item/07838b8f8b670cf2503d9270.html

github简明教程

作者：kun10 发布时间：July 31, 2010 分类：工具箱

GitHub 简明教程（转自百度Hi）
最近看了vingel的vim教程，便很想弄到他的vim配置，看教程里面配置全部放在了github上面，便寻思在ubuntu下面捣鼓一下这个东西～～，原文作者是roy zhu。
---------------------------------------------------------------------------
Auther: Roy Zhu
Date: 2008-04-29
Doc: 实践果然出真知！今天下午花了五个小时，终于弄懂了GitHub的用法。开心！
---------------------------------------------------------------------------
以一个测试用的项目为例(git://github.com/royzhu/test.git)

转到你的工作目录
roy@ubuntu:~/$ cd workspace

创建、下载项目文件夹（不知道是不是该叫它“包”）
roy@ubuntu:~/workspace$ git clone git://github.com/royzhu/test.git

等待一段时间后，项目就下好了
roy@ubuntu:~/workspace$ ls -la
drwxr-xr-x 3 roy roy 4096 2008-04-29 17:10 test

roy@ubuntu:~/workspace$ cd test

查看主枝和分支。登录GitHub.com，加入项目后，在项目里的Network有图形化的分支图
roy@ubuntu:~/workspace/test$ git show-branch
[master] a new branch
master是默认的住分支名

建立项目远程地址
roy@ubuntu:~/workspace/test$ git remote add origin git@github.com:royzhu/test.git

建立自己的分支
roy@ubuntu:~/workspace/test$ git branch your_branch_name

再看看有哪些分支
roy@ubuntu:~/workspace/test$ git show-branch
! [your_branch_name] a new branch
--
*+ [master] a new branch

查看现在使用的分支
roy@ubuntu:~/workspace/test$ git branch
* master
your_branch_name
加*号表示当前使用的分支

进入自己的分支
roy@ubuntu:~/workspace/test$ git checkout your_branch_name

再看看
roy@ubuntu:~/workspace/test$ git branch
master
* your_branch_name

添加、修改些东西吧
roy@ubuntu:~/workspace/test$ vim something

把文件加入跟踪（每次提交前必须写这步）
roy@ubuntu:~/workspace/test$ git add something

提交修改（提交到本地，没有传到服务器）
roy@ubuntu:~/workspace/test$ git commit -m '说明'

提交分支到服务器
roy@ubuntu:~/workspace/test$ git push origin your_branch_name
“origin”是固定的

获得最新的项目文件（从服务器下载）
roy@ubuntu:~/workspace/test$ git pull git://github.com/royzhu/test.git