用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