重新布署开发环境,基于CentOS6.4 64位。直接贴记录。
1. 基础配置
==================================================
1.1 连接网络
vi /etc/sysconfig/network-scripts/ifcfg-eth0
#NM_CONTROLLED="no"
ONBOOT="yes"
1.2 配置静态IP
IPADDR="192.168.80.91"
NETMASK="255.255.255.0"
BROADCAST="192.168.80.255"
GATEWAY="192.168.80.2"
DNS1="8.8.8.8"
DNS2="8.8.4.4"
1.3 配置网卡MAC地址
删除网卡信息
rm /etc/udev/rules.d/70-persistent-net.rules
重启
1.4 安装基础软件
yum install wget man lrzsz ntpdate
1.5 配置repe
wget http://mirrors.sohu.com/fedora-epel/6/x86_64/epel-release-6-8.noarch.rpm
rpm -ivh epel-release-6-8.noarch.rpm
1.6 更新源
yum makecache
yum update -x kernel*
1.7 更新系统
yum update
1.8 切换语言为中文
vi /etc/sysconfig/i18n
LANG="zh_CN.UTF-8"
source /etc/sysconfig/i18n
1.9 修改时区
tzselect
cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime
1.10 关闭防火墙和selinux
chkconfig iptables off
chkconfig ip6tables off
service iptables stop
service ip6tables stop
修改/etc/selinux/config文件中的SELINUX="" 为 disabled
如果不想重启系统,使用命令setenforce 0
1.11 加快启动
vi /boot/grub/grub.conf
修改 timeout = 5 为 timeout = 1
1.12 安装工具
# 压缩解压工具
yum install p7zip-plugins
# 编译工具包软件
yum install gcc gcc-c++ make automake autoconf libtool zlib-devel openssl-devel
2. vmware相关配置
==================================================
2.1 添加虚拟硬盘
#查看
cat /proc/scsi/scsi
#添加
echo "scsi add-single-device 1 2 3 4" >>/proc/scsi/scsi
#移除
echo "scsi remove-single-device 1 2 3 4" >> /proc/scsi/scsi
#命令行解释
1 : SCSI HBA ID
2 : SCSI Channel
3 : SCSI ID
4 : LUN ID
#添加到第一块SCSI HBA, Channel 0, ID 3, LUN 0:
echo "scsi add-single-device 0 0 3 0" >>/proc/scsi/scsi
2.2 格式化,挂载
fdisk /dev/sdb 分区
mkfs.ext4 /dev/sdb1 格式化
mkdir /data
vi /etc/fstab
/dev/sdb1 /data ext4 defaults 0 0
mount -a
2.3 安装vmtools
mkdir -p /mnt/cdrom
mount /dev/cdrom /mnt/cdrom
cp VMwareTools-9.2.0-799703.tar.gz /data/pkg/
cd /mnt/cdrom
umount /mnt/cdrom
tar -xzf VMwareTools-9.2.0-799703.tar.gz
开启时间同步
vmware-toolbox-cmd timesync enable
3. 编译软件
==================================================
目录配置
#创建/data目录,所有数据放在此文件夹中
mkdir /data
#存放源码包
mkdir /data/pkg
#存放解压代码
mkdir /data/src
3.1 nodejs
cd /data/pkg/
wget http://nodejs.org/dist/v0.10.10/node-v0.10.10.tar.gz
tar -xzf node-v0.10.10.tar.gz -C /data/src
cd /data/src/node-v0.10.10
./configure --prefix=/usr/local/node-v0.10.10
ln -s /usr/local/node-v0.10.4 /usr/local/node
mkdir /usr/local/node/node_modules
ln -s /usr/local/node/node_modules /usr/local/lib/
npm config set prefix /usr/local
vim /etc/prefix
#环境变量
export NODE_HOME=/usr/local/node
export NODE_PATH=$NODE_PATH/node_modules
export SOFT_PATH=$NODE_HOME/bin
PATH=$PATH:$SOFT_PATH
source /etc/prefix
npm config set prefix /usr/local
3.2 编译nginx
cd /data/pkg
wget http://nginx.org/download/nginx-1.4.1.tar.gz
tar -xzf nginx-1.4.1.tar.gz -C /data/src
#安装依赖
yum install pcre-devel
#添加用户
groupadd www
useradd -s /sbin/nologin -g www www -M
cd /data/src/nginx-1.4.1
./configure --prefix=/usr/local/nginx.basic \
--user=www \
--group=www \
--pid-path=/var/run/nginx.basic.pid \
--lock-path=/var/lock/nginx.basic.lock \
--with-http_ssl_module \
--with-http_dav_module \
--with-http_flv_module \
--with-http_realip_module \
--with-http_gzip_static_module \
--with-http_stub_status_module \
--with-mail --with-mail_ssl_module \
--http-client-body-temp-path=/var/tmp/nginx.basic/client \
--http-proxy-temp-path=/var/tmp/nginx.basic/proxy \
--http-fastcgi-temp-path=/var/tmp/nginx.basic/fastcgi \
--http-uwsgi-temp-path=/var/tmp/nginx.basic/uwsgi \
--http-scgi-temp-path=/var/tmp/nginx.basic/scgi \
--error-log-path=/var/log/nginx.basic.error.log \
--http-log-path=/var/log/nginx.basic.access.log
make && make install
vi /usr/local/nginx.basic/sbin/nginxd
###启动脚本### {{{
#!/bin/sh
#
# nginx - this script starts and stops the nginx daemon
#
# chkconfig: - 85 15
# description: Nginx is an HTTP(S) server, HTTP(S) reverse \
# proxy and IMAP/POP3 proxy server
# processname: nginx
# config: /etc/nginx/nginx.conf
# config: /etc/sysconfig/nginx
# pidfile: /var/run/nginx.pid
# Source function library.
. /etc/rc.d/init.d/functions
# Source networking configuration.
. /etc/sysconfig/network
# Check that networking is up.
[ "$NETWORKING" = "no" ] && exit 0
prefix="/usr/local/nginx.basic
nginx="${prefix}/sbin/nginx"
prog=$(basename $nginx)
NGINX_CONF_FILE="${prefix}/conf/nginx.conf"
[ -f /etc/sysconfig/nginx ] && . /etc/sysconfig/nginx
lockfile=/var/lock/subsys/nginx
make_dirs() {
# make required directories
user=`$nginx -V 2>&1 | grep "configure arguments:" | sed 's/[^*]*--user=\([^ ]*\).*/\1/g' -`
if [ -z "`grep $user /etc/passwd`" ]; then
useradd -M -s /bin/nologin $user
fi
options=`$nginx -V 2>&1 | grep 'configure arguments:'`
for opt in $options; do
if [ `echo $opt | grep '.*-temp-path'` ]; then
value=`echo $opt | cut -d "=" -f 2`
if [ ! -d "$value" ]; then
# echo "creating" $value
mkdir -p $value && chown -R $user $value
fi
fi
done
}
start() {
[ -x $nginx ] || exit 5
[ -f $NGINX_CONF_FILE ] || exit 6
make_dirs
echo -n $"Starting $prog: "
daemon $nginx -c $NGINX_CONF_FILE
retval=$?
echo
[ $retval -eq 0 ] && touch $lockfile
return $retval
}
stop() {
echo -n $"Stopping $prog: "
killproc $prog -QUIT
retval=$?
echo
[ $retval -eq 0 ] && rm -f $lockfile
return $retval
}
restart() {
configtest || return $?
stop
sleep 1
start
}
reload() {
configtest || return $?
echo -n $"Reloading $prog: "
killproc $nginx -HUP
RETVAL=$?
echo
}
force_reload() {
restart
}
configtest() {
$nginx -t -c $NGINX_CONF_FILE
}
rh_status() {
status $prog
}
rh_status_q() {
rh_status >/dev/null 2>&1
}
case "$1" in
start)
rh_status_q && exit 0
$1
;;
stop)
rh_status_q || exit 0
$1
;;
restart|configtest)
$1
;;
reload)
rh_status_q || exit 7
$1
;;
force-reload)
force_reload
;;
status)
rh_status
;;
condrestart|try-restart)
rh_status_q || exit 0
;;
*)
echo $"Usage: $0 {start|stop|status|restart|condrestart|try-restart|reload|force-reload|configtest}"
exit 2
esac
###启动脚本结束### }}}
ln -s /usr/local/nginx.basic /usr/local/nginx
ln -s /usr/local/nginx/sbin/nginxd /etc/init.d/nginxd
# 修改启动用户为www
vim /usr/local/nginx/conf/nginx.conf
user www www;
# 添加开机启动
chkconfig --add nginxd
3.3 编译mysql
cd /data/pkg
wget http://cdn.mysql.com/Downloads/MySQL-5.6/MySQL-5.6.12-1.el6.src.rpm
rpm -ivh MySQL-5.6.12-1.el6.src.rpm
cp /root/rpmbuild/SOURCES/mysql-5.6.12.tar.gz /data/pkg
tar -xzf mysql-5.6.12.tar.gz -C /data/src/
yum install cmake bison gperf ncurses-devel readline-devel time
#添加mysql用户
groupadd mysql
useradd -s /sbin/nologin -g mysql mysql -M
cd /data/src/mysql-5.6.12
cmake . -DCMAKE_INSTALL_PREFIX=/opt/mysql5.6
make && make install
cd /opt/mysql5.6
./scripts/mysql_install_db --user=db
vi my.cnf
datadir = /opt/mysql5.6/data
socket = /tmp/mysql.sock
pid-file = /var/run/mysql.pid
ln -s /opt/mysql5.6/support-files/mysql.server /etc/rc.d/init.d/mysqld
/etc/rc.d/init.d/mysqld start
#修改密码
./bin/mysqladmin -u root password '123456'
#添加开机启动
chkconfig --add mysqld
3.4 编译php
cd /data/pkg/
wget http://ftp.gnu.org/pub/gnu/libiconv/libiconv-1.14.tar.gz
wget http://tw1.php.net/distributions/php-5.3.26.tar.gz
tar -xzf libiconv-1.14.tar.gz -C /data/src
tar -xzf php-5.3.26.tar.gz -C /data/src
yum install libxml2-devel curl-devel libjpeg-devel libpng-devel gd-devel freetype-devel zlib-devel libmcrypt-devel libtool-ltdl-devel
cd /data/src/libiconv-1.14/
./configure --prefix=/usr/local/libiconv
make && make install
echo "/usr/local/libiconv/lib">>/etc/ld.so.conf.d/usr_local_lib.conf
ldconfig
ldconfig -p | grep libiconv
cd /data/src/php-5.3.26/
./configure \
--prefix=/usr/local/php5.3 \
--with-config-file-path=/usr/local/php5.3/etc \
--with-config-file-scan-dir=/usr/local/php5.3/etc/conf.d \
--with-mysql=mysqlnd \
--with-iconv=/usr/local/libiconv \
--with-freetype-dir \
--with-jpeg-dir \
--with-zlib \
--with-libxml-dir=/usr \
--enable-xml \
--disable-rpath \
--enable-discard-path \
--enable-safe-mode \
--enable-bcmath \
--enable-shmop \
--enable-sysvsem \
--enable-inline-optimization \
--with-curl \
--with-curlwrappers \
--enable-mbregex \
--enable-fpm \
--enable-mbstring \
--with-mcrypt \
--with-gd \
--enable-gd-native-ttf \
--with-openssl \
--with-mhash \
--enable-pcntl \
--enable-sockets \
--with-xmlrpc \
--enable-zip \
--enable-soap \
--with-pdo-mysql=mysqlnd \
--with-mysqli=mysqlnd
make ZEND_EXTRA_LIBS='-liconv'
make install
#复制配置文件
ln -s /usr/local/php5.3 /usr/local/php
mkdir /usr/local/php/etc/back
cp php.ini* /usr/local/php/etc/back
cp sapi/fpm/init.d.php-fpm /usr/local/php/bin/php-fpm
#因为php5.3开始自带fpm,使用自带的管理脚本
cd /usr/local/php/etc
cp back/php-fpm.conf.default ./php-fpm.conf
cp back/php.ini-production ./php.ini
#修改 php-fpm.conf
vi /usr/local/php/etc/php-fpm.conf
修改 ;pid = run/php-fpm.pid 为 pid = run/php-fpm.pid (去掉前面的分号)
修改 user = nobody 为 user = www
修改 group = nobody 为 group = www
#配置php-fpm
chmod +x /usr/local/php/bin/php-fpm
ln -s /usr/local/php/bin/php-fpm /etc/init.d/php-fpm
#添加启服务
chkconfig --add php-fpm
#启动php-fpm
service php-fpm start
3.5 编译python
cd /data/pkg/
wget http://www.python.org/ftp/python/2.7.5/Python-2.7.5.tgz
tar -xjf Python-2.7.5.tgz -C /data/src
cd /data/src/Python-2.7.5
./configure --prefix=/usr/local/python27
make && make install
rm /bin/python /bin/python2 -f
#修改yum,引用python2.6
vi yum
#!/usr/bin/python26
配置PATH
vi /etc/profile
export PY_PATH=/usr/local/python27
在SOFT_PATH后面加上:$PY_PATH/bin
}}}
cd /usr/bin
rm python
vi yum
#!/usr/bin/python2.6
3.6 编译安装ruby
wget http://pyyaml.org/download/libyaml/yaml-0.1.4.tar.gz
wget ftp://ftp.ruby-lang.org/pub/ruby/2.0/ruby-2.0.0-p195.tar.bz2
tar -zxf yaml-0.1.4.tar.gz -C /data/src
tar -jxf ruby-2.0.0-p195.tar.bz2 -C /data/src
yaml
cd /data/src/yaml-0.1.4 #pwd
./configure --prefix=/usr/local/libyaml
make && make install
ruby
cd /data/src/ruby-2.0.0-p195
./configure --prefix=/usr/local/ruby200 --enable-shared --disable-install-doc --with-opt-dir=/usr/local/libyaml
make && make install
vi /etc/profile
export RUBY_PATH=/usr/local/ruby200
在SOFT_PATH后面加上:$RUBY_PATH/bin
gem sources --remove http://rubygems.org/
gem sources -a http://ruby.taobao.org/
gem update --system
4. 其它配置
4.1 目录配置
#放置网站
mkdir /data/www
ln -s /data/www /www
#放置配置
mkdir cfg
mkdir cfg/nginx #nginx配置
mkdir cfg/php53 #php5.3配置
mkdir cfg/vim #vim配置
4.2 配置samba
yum install samba
#存放samba共享
mkdir /share
groupadd share
useradd -M -s /sbin/nologin -g share share
#设置share帐号的samba密码
smbpasswd -a share
chown share:share /share
chmod 777 /share
vi /etc/samba/smb.conf
# 在[global]处添加
; 软链接
follow symlinks = yes
wide links = yes
unix extensions = no
# 在底部添加
[Share]
comment = share
path = /share
public = no
writable = yes
valid users = share
; 权限
force user = root
force group = root
create mask = 0664
directory mask = 0775
#链接目录
ln -s /data /share
ln -s /data/www/ /share/
ln -s /data/cfg /share/
ln -s /data/local /share
ln -s /data/opt /share
ln -s /data/src /share
ln -s /data/pkg /share
4.3 php扩展
安装 APC redis
/usr/local/php/bin/phpize
./configure --enable-apc --with-php-config=/usr/local/php/bin/php-config
make
make install
vi /usr/local/php/etc/conf.d/apc.ini
extension = "apc.so"
apc.enabled = 1
apc.cache_by_default = on
apc.shm_segments = 1
apc.shm_size = 32M
apc.ttl = 3600
apc.user_ttl = 3600
apc.num_files_hint = 0
apc.write_lock = On
vi /usr/local/php/etc/conf.d/redis.ini
[redis]
extension = "redis.so"
4.4 nginx模板范本
# localhost
server {
listen 80 default;
root /www/localhost;
index index.html index.htm index.php index-dev.php;
server_name localhost;
location ~* \.php {
fastcgi_pass 127.0.0.1:9000;
#fastcgi_pass unix:/tmp/nginx_sockets_php5-fpm.sock;
fastcgi_index index-dev.php;
include fastcgi.conf;
set $path_info "";
set $real_script_name $fastcgi_script_name;
if ($fastcgi_script_name ~ "^(.+?\.php)(/.+)$") {
set $real_script_name $1;
set $path_info $2;
}
fastcgi_param PATH_INFO $path_info;
fastcgi_param SCRIPT_NAME $real_script_name;
#fastcgi_split_path_info ^((?U).+\.php)(/?.+)$;
#fastcgi_param PATH_INFO $fastcgi_path_info;
#fastcgi_param PATH_TRANSLATED $document_root$fastcgi_path_info;
}
location ~* \.(jpg|png|jpeg|bmp|gif|swf|js|css) {
#expires 7d;
access_log off;
add_header Cache-Control no-cache;
}
#if (!-e $request_filename) {
#rewrite ([0-9]+)-qr\.png$ /qr.php?id=$1 last;
#rewrite "^(.*)\.[0-9]{8,}\.(js|css|png|jpg|gif|bmp|ico)" $1.$2 last;
#rewrite ^(((?!\.php).)*)$ /index-dev.php$1 break;
#rewrite ^(.*)$ /index-dev.php?s=$1 break;
#rewrite ^(.*)$ /index-dev.php$1 last;
#}
}
接昨天的[linux热拔插scsi硬盘],分享下磁盘分区和挂载。输入fsdisk -l可以看到/dev/sdb磁盘信息。
1.分区
fdisk /dev/sdb
#按 m 可以显示帮助
Command (m for help):
#输入n并回车添加一个1个新分区
n
#分区类型提示
Command action
e extended
p primary partition (1-4)
#p创建主分区,e创建扩展分区。这里创建主分区,按p并回车
p
#输入分区号
Partition number (1-4):
#按1并回车
1
#输入起始柱面默认为1,这里直接回车
<Enter>
#结束柱面可以输入柱面数或分区大小,这里创建20GB,输入+20GB并回车
Last cylinder, +cylinders or +size{K,M,G} (1-2610, default 2610):
+20GB
#创建完成,按w并回车写入分区信息
w
2. 格式化分区,这里直接格式化为ext4的磁盘格式。
mkfs.ext4 /dev/sdb1
3. 挂载分区
将新的分区挂载到 /data 目录下,创建挂载目录
mkdir /data
修改分区信息 vi /etc/fstab 在后面加入下面的内容。
/dev/sdb1 /data ext4 defaults 0 0
使/etc/fstab中的挂载信息生效
mount -a
输入mount -l,可以看到/dev/sdb1 on /data type ext4 (rw)的信息,表示挂载成功。直接修改/etc/fstab配置,下次开机自动挂载。
测试系统是 CentOS6.4_x64
自己配置虚拟机,需要添加一块虚拟硬盘存放数据。虚拟机在更新软件,不想停机。学习了下热拔插硬盘的知识点
1. 在虚拟机中创建虚拟磁盘并添加。
2. 查看目前的磁盘信息
cat /proc/scsi/scsi
我返回的结果如下:
上面scsi1是光驱,scsi2那个设备是我的系统硬盘。
3. 添加硬盘设备
echo "scsi add-single-device 2 0 1 0" >> /proc/scsi/scsi
数字参数说明:默认添加一块硬盘和原有系统硬盘是同一组的,第一个数字是scsi2这里的2,第二个是Channel这里是0,第三个是Id,在原有值上面加1,Lun默认为0。再用cat /proc/scsi/scsi可以看到硬盘信息,fdisk -l,可以看到/dev/sdb硬盘。
如果需要移除刚才添加的硬盘使用 echo "scsi remove-single-device 2 0 1 0" >> /proc/scsi/scsi 就可以,把add-single-device换成了remove-single-device,其它相同。
测试系统是 CentOS6.4_x64
闭包这个词,不知道什么时候起成了js必须掌握的知识点。分享一个实例,一个简单的缓存器。
使用场景:需要存储一些内容,但希望内容是受保险的,只存储符合一定规则的内容,通过指定的接口访问。不会被不受控的代码修改其中的值。代码如下:
window.cache = (function(){
var _data = [];
return {
add: function(name, value, force) {
if (force || !_data[name]) {
_data[name] = value;
return true;
}
return false;
},
get: function(name) {
return _data[name] || false;
},
del: function(name) {
try {
delete _data[name];
}
catch (e) { }
return true;
}
}
})();
简单说明:_data是函数的局部变量,存在于函数中的add、get、del方法在函数执之后依然可以访问到_data,这种情况被称之为闭包。数据存储在_data这个局部变量中,add get del可以访问_data进行操作,充当外界访问的接口,与外界代码隔离。可以在add中添加过淲规则,达到对数据进行过滤的目的。外界通过 add、get、del方法来操作,可以防止某些不兼容的代码直接将变量置空或删除(这种概率较低的)。
这两天修改一个弹出层,发现两个较诡异的bug。一翻折腾得出结论:不要直接在body标签中插入大段html代码。
bug1:ie6下,弹出层中的背景图片有一定机率不显示。
正常情况下:

背景图片未显示:

bug2:在世界之窗(基于chromium17的壳浏览器)中,点击调用弹出层,默认不显示。将页面滚动一下,弹出层正常显示。
bug1在经过各种折腾后,将开发的web服务器上去掉add_header Cache-Control no-cache;之后正常。bug2原来打算在显示弹出层之后,将页面的scroll的值+1。隔天因为另一个需求对js代码进行调整,原来弹出层代码段是下面这样的:
后面再校验时,上面两个bug全部消失。
有一个小需求,将一个目录包括子目录中的coffee文件批量转换到另一个指定的目录中,同时保挂子目录的结构。改了一个类似的Makefile。发一下备忘:
coffeeBaseDir=coffee/ coffeeDir=$(abspath $(coffeeBaseDir)) jsBaseDir=js/ jsDir=$(abspath $(jsBaseDir)) jsFile=$(shell find $(coffeeBaseDir) -type f -name *.coffee | sed 's@^$(coffeeBaseDir)@$(jsDir)/@g' | sed 's@\.coffee$$@\.js@g') jsDeploy: $(jsFile) $(jsDir)/%.js: $(coffeeDir)/%.coffee @mkdir -p `sed 's@/[^/]\+$$@/@g' <<< '$@'` coffee -bp $< > $@ test: @echo $(jsFile) clean: @rm js -fr @echo 'clean success!'
测试结果:
>find coffee -type f coffee/abc.coffee/3.coffee coffee/abc.coffee/1.coffee coffee/abc.coffee/2.coffee coffee/p1/3.coffee coffee/p1/1.coffee coffee/p1/2.coffee coffee/p2/3.coffee coffee/p2/1.coffee coffee/p2/2.coffee coffee/p3/3.coffee coffee/p3/1.coffee coffee/p3/2.coffee >find js -type f js/abc.coffee/2.js js/abc.coffee/1.js js/abc.coffee/3.js js/p1/2.js js/p1/1.js js/p1/3.js js/p2/2.js js/p2/1.js js/p2/3.js js/p3/2.js js/p3/1.js js/p3/3.js
在nginx官网看到有ngx_http_empty_gif_module这个模块,可以默认输出一个空白的gif,某个png透明的插件要用到这种透明的gif文件,简单看了下,配置方法很简单:
最开始我本地总是提示File not found.针对php框架的rewrite将这个请求重定向到了php请求,在rewrite最开始添加了一行 rewrite ^/_\.gif$ /_.gif break; 将文件重定向一次OK了
参考链接:
ngx_http_empty_gif_module: http://nginx.org/en/docs/http/ngx_http_empty_gif_module.html
锋利web前端为一个系列文章,分享利用python、vimscript等语言,整合haml、sass、coffee等实现快速前端开发。
可以到 [锋利web前端开发]索引贴 查看当前系列的所有文章
本篇主要讲解 使用vim插件autocommand编译coffee并调用uglifyjs进行压缩。
自己为了提升工作效率而写的一个插件,以整合coffee开发为例子。列举一下使用方式。
1.安装:
插件地址:https://github.com/thinkjs/autocommand (目前没有发布到vim.org上面),用git获取以后,将plugin目录中的autocommand.vim复制到vim的plugin目录即可。
依赖:python2.x
2.npm相关插件安装
通过调用外部命令来实现功能,需要安装cofee和uglify。安装命令npm install coffee-script uglify-js -g。
3.创建项目及配置
vim打开项目路径,我这里是E:\project\test。创建js文件夹,用来放转换后的js代码。创建_source文件夹,用来存放源代码及配置文件。vim切换路径到_source文件夹。pwd一下,应该显示的是E:\project\test\_source,输入:AcmdInitConfig命令,按y创建配置文件。刷新_source文件夹,此时可以看到_config的配置文件。在_source下面创建coffee文件夹,用来放coffee源代码。这时整个目录应该是这样:
4.修改配置项
修改配置文件中的 coffee/ 相关配置项里 command 数组中添加一行 , "uglifyjs -mo ../js/#{$fileName}.min.js ../js/#{$fileName}.js",修改后整个配置文件内容如下:
{
"jade/": {
"path": "~",
"jade": {
"command": [
"jade -PO ../ jade/#{$fileName}.jade"
]
}
},
"sass/": {
"path": "~",
"sass": {
"command": [
"sass --style compact sass/#{$fileName}.sass ../css/#{$fileName}.css"
/* , "cp -fp ../css/#{$fileName}.css ../../public/css" */
]
}
},
"coffee/": {
"path": "~",
"coffee": {
"command":[
"coffee -bp coffee/#{$fileName}.coffee>../js/#{$fileName}.js"
, "uglifyjs -mo ../js/#{$fileName}.min.js ../js/#{$fileName}.js"
/* , "cp -fp ../js/#{$fileName}.js ../../public/js" */
]
}
}
}
/* vim:ft=javascript ts=2 sts=2 sw=2 et
*/
配置是一个json格式的文件。jade和sass的如果不用,可以删除。
5.编写代码文件
在_coffee文件夹下创建main.coffee文件,敲入一段coffee代码:
# Assignment: number = 42 opposite = true # Conditions: number = -42 if opposite # Functions: square = (x) -> x * x # Arrays: list = [1, 2, 3, 4, 5] # Objects: math = root: Math.sqrt square: square cube: (x) -> x * square x # Splats: race = (winner, runners...) -> print winner, runners # Existence: alert "I knew it!" if elvis? # Array comprehensions: cubes = (math.cube num for num in list)
vim执行:Acmd命令,如果执行正确,VIM底部会出现一串类似 19:44:29 execute coffee 这样的提示,表示执行成功。如果报错,会把错误显示出来。这时刷新E:/project/test/js文件夹,应该有main.js和main.min.js两个文件,main.js是main.coffee生成的js文件,main.min.js是用uglifyjs压缩后的js文件。
相关链接:
coffeescript: http://coffeescript.org/
uglifyjs: https://github.com/mishoo/UglifyJS2
autocommand使用说明:https://github.com/thinkjs/autocommand/wiki/quickref03
相关截图:
配置

执行成功的提示

报错提示

一、空格和Tab相关
空格和Tab是两种常见的排版缩进的字符,常见项目中的风格问题往往由此而起。vim可以很容易的处理好这些问题。首先我们要把这两个字符显示出来,默认这两个字符都是白的。使用如下方法设置:
" 显示tab和空格 set list " 设置tab和空格样式 set lcs=tab:\|\ ,nbsp:%,trail:- " 设定行首tab为灰色 highlight LeaderTab guifg=#666666 " 匹配行首tab match LeaderTab /^\t/
上面的设置将Tab显示为|(竖线),将行尾的空格显示为-(减号)。原本看起来好象还挺整齐的代码,这下原形毕露了。如下图:

列举几种常见tab和空格编码问题:
1. 代码中Tab和空格混排
需求:将空格转为Tab或Tab转为空格
解决方法:先设置自己的缩进设置,例如我是用4个空格缩进:set ts=4 sts=4 sw=4 et,然后敲入:ret可将代码中原有的Tab转成4个空格。后续编辑中,Tab键自动生成4个空格,你删除的时候,按一个删除键,删除的也是4个空格。如果你是用4个空格宽度的Tab缩进的,使用:set ts=4 sts=4 sw=4 noet,然后敲入:ret即可。
2. 行尾多余的空格和Tab
需求:删除多余空格
解决方法:输入:%s/\s*$//ge,将行尾多余空格删除。
二、换行相关
因为开发人员工具设置不同,导致两个文件换行符不同,或者同一个文件中出现多种换行符。
1. 转换文件换行方式
解决方法:设置fileformat属性,:set ff=dos (\r\n win换行) :set ff=unix (\n unix/linux换行) :set ff=mac (\r Mac换行)
2. 换行符混排(常见的情况是Win换行和Unix换行混排,VIM中会将文件识别为unix换行,在行尾显示^M)
需求:统一换行符
解决方法:输入:%s/\r//ge,将多余\r去掉,这时全部剩下\n换行然后保存。如果需要保存为win换行设置:set ff=dos再保存即可。
三、缩进对齐
类似Python的编码风格以缩进代表层级。这种情况将缩进层次多了,有时候很难确定这一段代码是否和上一段代码在同一缩进水平上。自己写了一个简单的函数,通过设置cc的值,来显示一条纵向的线作参考线。效果如下:

代码如下:快捷键Alt+o向左、Alt+u向左移动参考线
" --------------------------------------------------
" [参考线切换] {{{
" --------------------------------------------------
fu! ReferenceLine(t)
let ccnum = &cc
if ccnum == '' | let ccnum = 0 | en
let csw = &sw
if a:t == 'add'
let ccnum = ccnum + csw
exec "setl cc=".ccnum
elsei a:t == 'sub'
let ccnum = ccnum - csw
if ccnum >= 0 | exec "setl cc=".ccnum | en
en
endf
nn <silent> <A-u> :call ReferenceLine('sub')<CR>
nn <silent> <A-o> :call ReferenceLine('add')<CR>
" }}}
四、赋值符号对齐
有时候我们可能希望我们一段的赋值代码都用=号对齐,象下图这样:

解决方法:安装Tabular插件,选中要对齐的代码,输入:Tab/= 让代码通过=两边对齐。
之前抽时间研究了下gruntjs,分享一下使用grunt编译sass源文件的方案。gruntjs作为nodejs的自动化工具,现在有大量可用插件可让你的工具效率提升,有兴趣的可以了解下。http://gruntjs.com/
1. 创建项目目录,进到目录。
mkdir grunt3
cd grunt3
2. 创建项目包管理文件 package.json
{
"name": "myproject",
"description": "我的grunt项目",
"version": "0.1.0",
"readmeFilename": "README.md",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-sass": "~0.3.0",
"grunt-contrib-watch": "~0.4.4",
"grunt-contrib-cssmin": "~0.6.1"
}
}
3. 安装grunt包及需要用到的组件包
npm install -g grunt-cli
npm install grunt grunt-contrib-sass grunt-contrib-cssmin grunt-contrib-watch --save-dev
4. 创建grunt任务文件 Gruntfile.coffee
module.exports = (grunt)->
grunt.initConfig
pkg: grunt.file.readJSON('package.json')
sass:
dist:
options:
style: 'compact'
files:
'css/style.css' : 'sass/style.sass'
dev:
options:
style: 'expanded'
cssmin:
min:
files:
'css/style.min.css': 'css/style.css'
watch:
css:
files: ['sass/_common.sass', 'sass/style.sass']
tasks: ['sass:dist', 'cssmin:min']
grunt.loadNpmTasks('grunt-contrib-sass')
grunt.loadNpmTasks('grunt-contrib-cssmin')
grunt.loadNpmTasks('grunt-contrib-watch')
# Default task(s)
grunt.registerTask('default', ['sass'])
undefined
上面的配置中,将sass文件放在sass目录下,css文件放在css目录下。style.sass中包含_common.sass文件,当两个中的一个发生修改时,重新编译style.sass文件。编译后执行cssmin压缩css文件。
5. 使用
创建css sass目录,在sass目录中创建sass源文件,终端中输入 grunt watch。修改sass源文件时,grunt会自动执行编译。
相关链接:
gruntjs: http://gruntjs.com/
grunt-contrib-watch: https://github.com/gruntjs/grunt-contrib-watch
grunt-contrib-cssmin: https://github.com/gruntjs/grunt-contrib-cssmin
grunt-contrib-sass https://github.com/gruntjs/grunt-contrib-sass
grunt插件列表: https://github.com/gruntjs