用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