用npm-run自动化任务（转）

自动构建JavaScript有不少好工具。不过其实很少有人知道，npm run命令就能很好地完成这一任务，配置起来也很简单。

script

npm会在项目的package.json文件中寻找scripts区域，其中包括npm test 和npm start等命令。

其实，npm test 和npm start是npm run test 和npm run start的简写。事实上，你可以用npm run 来运行scripts里的任何条目。

使用npm run的方便之处在于，npm会自动把node_modules/.bin加入$PATH，这样你可以直接运行依赖程序和开发依赖程序，不用全局安装了。只要npm上的包提供命令行接口，你就可以直接使用它们，方便吧？当然，你总是可以自己写一个简单的小程序。

构建javascript

为了便于组织代码和利用npm上的包，写代码的时候往往使用module.exports和require()。

browserify可以将这些一起打包成单一的脚本。使用browserify很简单，只需在package.json中加入一个['build-js']条目，类似这样：

"build-js": "browserify browser/main.js > static/bundle.js"

如果是用于生产环境，还需要压缩一下。我们只需要将uglify-js加入devDependency，然后直接通过管道传递一下即可：

"build-js": "browserify browser/main.js | uglifyjs -mc > static/bundle.js"

监视javascript

为了能在修改文件后自动重新生成javascript文件，只需将上面的browserify命令换成watchify并加上一些参数。

"watch-js": "watchify browser/main.js -o static/bundle.js -dv"

这里加了-d和-v两个参数，这样就可以看到详细的调试信息。

构建CSS

用cat就可以搞定：

"build-css": "cat static/pages/*.css tabs/*/*.css > static/bundle.css"

监视CSS

用catw监视CSS文件的改动：

"watch-css": "catw static/pages/*.css tabs/*/*.css -o static/bundle.css -v"

序列化子任务

npm run每个子任务，然后用&&连接起来就成。

"build": "npm run build-js && npm run build-css"

并行子任务

类似地，使用&并行子任务：

"watch": "npm run watch-js & npm run watch-css"

完整的package.json例子

将上面提到的内容组合起来，package.json大致就是这个样子：

{
  "name": "my-silly-app",
  "version": "1.2.3",
  "private": true,
  "dependencies": {
    "browserify": "~2.35.2",
    "uglifyjs": "~2.3.6"
  },
  "devDependencies": {
    "watchify": "~0.1.0",
    "catw": "~0.0.1",
    "tap": "~0.4.4"
  },
  "scripts": {
    "build-js": "browserify browser/main.js | uglifyjs -mc > static/bundle.js",
    "build-css": "cat static/pages/*.css tabs/*/*.css",
    "build": "npm run build-js && npm run build-css",
    "watch-js": "watchify browser/main.js -o static/bundle.js -dv",
    "watch-css": "catw static/pages/*.css tabs/*/*.css -o static/bundle.css -v",
    "watch": "npm run watch-js & npm run watch-css",
    "start": "node server.js",
    "test": "tap test/*.js"
  }
}

生产环境下，只需运行npm run build。如果是本地开发，就用npm run watch。

当然也可以扩展，比如，如果你希望在运行start前先运行build，那么值需写上这么一行：

"start": "npm run build && node server.js"

也许你想同时启动watcher？

"start-dev": "npm run watch & npm start"

当事情变得非常复杂的时候

如果你发现在单个scripts条目中塞了一大堆命令，那你可以考虑重构一下，把一些命令放到别的地方，比如/bin。

你可以用任何语言编写这个脚本，比如bash、node或perl。只需要在脚本上加上合适的#!行。还有，别忘了chmod +x。

#!/bin/bash
(cd site/main; browserify browser/main.js | uglifyjs -mc > static/bundle.js)
(cd site/xyz; browserify browser.js > static/bundle.js)

"build-js": "bin/build.sh"

原文地址：http://substack.net/task_automation_with_npm_run