Skip to content
chencheng (云谦) edited this page May 21, 2014 · 1 revision

在项目中使用 spm3 (以 express 为例)

上周末写了个 express 项目,通过 amb 把 spm3 整合了进去,记录如下:

目录结构

前端资源 css, js, img 相关的目录结构如下:

+ assets
  + css
  + js
  + img
+ public
- package.json
  • assets 是前端资源文件的 src 目录
  • public 是 express 的 static 目录,前端资源文件 build 到这里
  • package.json 保存 amb 和 spm@3x 的相关配置

安装 amb

$ npm install amb -g

修改 package.json

添加 amb 配置

比如:

"amb": {
  "watch": "./assets/**",
  "dest": "./public/",
  "img_src": "./assets/img/"
}
  • watch 用于监听文件修改,实时 build 以及 livereload 页面
  • dest build 指定目录
  • img_src 里的文件会在经过处理后,build 到 public/img 下

设置 spm.output

用来指定要输出到 public 下的 css 和 js,img 会自动处理,无须指定,比如:

"output": [
  "assets/css/home.css",
  "assets/js/home.js"
]

开启 build watch

监听文件修改,实时 build,并 livereload 页面

$ amb build --watch

amb watch