左手's Blog
我是左手，行走在路上!
使用acmd构建jade/sass/livescript开发环境
之前写过一个browserSync的脚本编译jade/sass/coffee，在多个项目中拷贝脚本文件比较麻烦，业余封装了一个npm插件，这里介绍一下用法。
项目地址：https://github.com/thinkjs/autocommand-cli，插件使用typescript开发，欢迎有兴趣的同学一起完善。
环境搭建
1.创建目录
mkdir example && cd example
mkdir _source _source/jade _source/sass _source/live
mkdir html html/css html/js
_source目录存放源代码，_source/jade、_source/sass、_source/live分别存放jade、sass、livescript源文件。html目录存放生成结果，html、html/css、html/js分别存放html、css、js文件。
2.安装npm包依赖
echo '{}' > package.json
npm install thinkjs/autocommand-cli#latest jade node-sass livescript --save-dev
如果网络不好，建议使用cnpm替代
3.编辑package.json加以下内容：
"scripts": {
"acmd": "acmd",
"start": "acmd watch",
"build": "acmd run"
},
完整的package.json如下
{
"scripts": {
"acmd": "acmd",
"start": "acmd watch",
"build": "acmd run"
},
"devDependencies": {
"autocommand-cli": "thinkjs/autocommand-cli#latest",
"jade": "^1.11.0",
"livescript": "^1.5.0",
"node-sass": "^3.9.3"
}
}
4.创建acmd配置文件并修改
npm run acmd -- config -i
默认在当前目录下创建名为_config的配置文件，编辑该配置文件
修改file字段内容为：
"file": ["_source/**/*.{jade,sass,ls}"],
修改define字段内容为：
"define": {
"_source/": {
".jade": {
"file": "html/#{fileName}.html",
"command": "jade -Po html/ #{file}"
},
".sass": {
"file": "html/css/#{fileName}.css",
"command": "node-sass --output-style compact #{file} html/css/#{fileName}.css"
},
".ls": {
"file": "html/js/#{fileName}.js",
"command": "lsc -co html/js/ #{file}"
}
}
},
修改 browserSync > init下的server为：
"server": {
"baseDir": "html/"
},
完整配置文件如下：
{
// 侦听的文件
"file": ["_source/**/*.{jade,sass,ls}"],
// 过滤
"ignore": ["_*.*", "node_modules/"],
// 变量
"variable": {
"localBin": "~/node_modules/.bin"
},
// 环境变量
"environment": {
":PATH": "#{localBin}"
},
// 定义
"define": {
"_source/": {
".jade": {
"file": "html/#{fileName}.html",
"command": "jade -Po html/ #{file}"
},
".sass": {
"file": "html/css/#{fileName}.css",
"command": "node-sass --output-style compact #{file} html/css/#{fileName}.css"
},
".ls": {
"file": "html/js/#{fileName}.js",
"command": "lsc -co html/js/ #{file}"
}
}
},
// browserSync配置
"browserSync": {
// 初始化配置
"init": {
"server": {
"baseDir": "html/"
},
"open": false,
"ui": false
},
// 启动livereload
"reload": true
}
}
// vim: se sw=2 ts=2 sts=2 ft=javascript et:
开发
1.编译jade文件
创建_source/jade/index.jade，内容如下：
doctype html
html
head
title jade page
body
h1 hello world
在terminal中运行 npm start，浏览器访问 http://localhost:3000，可查看页面。
2.编译sass文件
创建_source/sass/style.sass，内容如下：
html, body padding: 0 margin: 0 font-size: 16px h1 color: green
编辑_source/jade/index.jade加入对style.sass的引用，在head中插入以下内容：
link(href="css/style.css" rel="stylesheet")
保存查看浏览器，内容已自动刷新。
3.编译livescript文件
创建_source/sass/script.ls，内容如下：
console.log \hello
编辑_source/jade/index.jade加入对script.ls的引用,在body中插下以下内容：
script(src="js/index.js")
保存可查看浏览器中的控制台输出。
进阶用法
1.编译所有文件
有时需要对项目的所有源文件进行编译，使用如下命令：
npm run build
2.编译某一类型文件
比如需要编译所有的sass文件，可以使用如下命令：
npm run build -- -f _source/sass/*.sass
3.使用glob表达式匹配文件
-f选项支持glob表达式，使用引号括起即可，例如编译jade和sass可以使用如下命令：
npm run build -- -f '_source/**/*.{jade,sass}'
4.使用通道
如果使用git管理文件，需要编译git中已经修改的文件，可以使用如下命令：
git status -uno | awk '{print $2}' | npm run build -- -o
使用find查找sass进行编译，命令如下：
find _source -type f | grep *.sass | npm run build -- -o
小结
autocommand-cli项目最初的出发点是为了锻炼一下typescript的能力，经过半年的迭代，功能已经逐渐完善。命令行参数解析、文件改动侦听、http服务器功能都使用现成npm插件实现。前端的工具链不断完善，各种工具层出不穷，花大量时间造一个自己用起来的顺手的工具还是有点奢侈:)
巧用ie条件注释解决浏览兼容问题
在做web开发的时候，最头疼的就是处理各种浏览器兼容。尤其是ie低版本的兼容。于是各种 css hack层出不穷。类似 _ * \9 \0一类的，功能是实现的，却让本来写得很整齐的 css 代码变得乱糟糟的。其实用ie的条件注释就可以很简单的解决处理这些问题。
示例：
<!DOCTYPE html>
<html>
<!--[if lt IE 7]><html class="ie6"><![endif]-->
<head>
<meta charset="utf-8">
<title>css hack</title>
<style>
.test {height: 40px; background: blue;}
.ie6 .test {background: red;}
</style>
</head>
<body>
<p class="test"></p>
</body>
</html>