之前写过一个browserSync的脚本编译jade/sass/coffee，在多个项目中拷贝脚本文件比较麻烦，业余封装了一个npm插件，这里介绍一下用法。
项目地址：https://github.com/thinkjs/autocommand-cli ，插件使用typescript开发，欢迎有兴趣的同学一起完善。

环境搭建

1.创建目录

1
2
3
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包依赖

1
2
echo '{}' > package.json
npm install lccf/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配置文件并修改

1
npm run acmd -- config -i

默认在当前目录下创建名为_config的配置文件，编辑该配置文件
修改file字段内容为：

1
"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 html
html
  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: 16px
 
h1
  color: green

编辑_source/jade/index.jade加入对style.sass的引用，在head中插入以下内容：

1
link(href="css/style.css" rel="stylesheet")

保存查看浏览器，内容已自动刷新。

3.编译livescript文件
创建_source/sass/script.ls，内容如下：

1
console.log \hello

编辑_source/jade/index.jade加入对script.ls的引用,在body中插下以下内容：

1
script(src="js/index.js")

保存可查看浏览器中的控制台输出。

进阶用法

1.编译所有文件
有时需要对项目的所有源文件进行编译，使用如下命令：

1
npm run build

2.编译某一类型文件
比如需要编译所有的sass文件，可以使用如下命令：

1
npm run build -- -f _source/sass/*.sass

3.使用glob表达式匹配文件
-f选项支持glob表达式，使用引号括起即可，例如编译jade和sass可以使用如下命令：

1
npm run build -- -f '_source/**/*.{jade,sass}'

4.使用通道
如果使用git管理文件，需要编译git中已经修改的文件，可以使用如下命令：

1
git status -uno | awk '{print $2}' | npm run build -- -o

使用find查找sass进行编译，命令如下：

1
find _source -type f | grep *.sass | npm run build -- -o

小结

autocommand-cli项目最初的出发点是为了锻炼一下typescript的能力，经过半年的迭代，功能已经逐渐完善。命令行参数解析、文件改动侦听、http服务器功能都使用现成npm插件实现。前端的工具链不断完善，各种工具层出不穷，花大量时间造一个自己用起来的顺手的工具还是有点奢侈:)