用npm-run自動化任務

自動建構javascript有不少 好工具 。不過其實很少有人知道，

npm run

指令就能很好地完成這一任務，配置起來也很簡單。

James Halliday在部落格上分享了使用

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

和上面用 watchify 監視 javascript 類似，我們用

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"

Windows

你可能會吃驚的是，

相當多的類bash文法可以在Windows上工作

。不過我們至少還需要讓

;

&

可以正常工作。

James Halliday分享過

一些在Windows相容的經驗

，這些經驗也适用于本文的主題，可以參考。此外要推薦下

win-bash

，這是一個很友善的Windows平台上的bash實作。

總結

James Halliday希望這個使用

npm run

的方式能吸引一部人對現有的前端自動化任務工具不滿意的人。James Halliday比較偏好unix體系下的那些學習曲線陡峭的工具，比如

git

，或者類似 npm 這種在 bash 的基礎上提供極簡界面的工具。也就是說，不需要很多儀式化操作和配合的工具。非常簡單的工具，已經足夠勝任通常的任務。

如果你對

npm run

風格不感冒。你也許可以考慮下

Makefiles

，一個穩定而簡單，不過多少有點怪異的替代品。