左手'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加以下内容：
1 2 3 4 5 | "scripts": { "acmd": "acmd", "start": "acmd watch", "build": "acmd run"}, |
完整的package.json如下
1 2 3 4 5 6 7 8 9 10 11 12 13 | { "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字段内容为：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | "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为：
1 2 3 | "server": { "baseDir": "html/"}, |
完整配置文件如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | { // 侦听的文件 "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，内容如下：
1 2 3 4 5 6 | doctype htmlhtml head title jade page body h1 hello world |
在terminal中运行 npm start，浏览器访问 http://localhost:3000，可查看页面。
2.编译sass文件
创建_source/sass/style.sass，内容如下：
1 2 3 4 5 6 7 | html, body padding: 0 margin: 0 font-size: 16pxh1 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插件实现。前端的工具链不断完善，各种工具层出不穷，花大量时间造一个自己用起来的顺手的工具还是有点奢侈:)