自動(dòng)構(gòu)建javascript有不少好工具。不過(guò)其實(shí)很少有人知道，npm run命令就能很好地完成這一任務(wù)，配置起來(lái)也很簡(jiǎn)單。

James Halliday在博客上分享了使用npm run自動(dòng)化任務(wù)的一些經(jīng)驗(yàn)：

script

npm 會(huì)在項(xiàng)目的 package.json 文件中尋找 scripts 區(qū)域，其中包括npm test和npm start等命令。

其實(shí)npm test和npm start是npm run test和npm run start的簡(jiǎn)寫(xiě)。事實(shí)上，你可以使用npm run來(lái)運(yùn)行scripts里的任何條目。

使用npm run的方便之處在于，npm會(huì)自動(dòng)把node_modules/.bin加入$PATH，這樣你可以直接運(yùn)行依賴(lài)程序和開(kāi)發(fā)依賴(lài)程序，不用全局安裝了。只要npm上的包提供命令行接口，你就可以直接使用它們，方便吧？當(dāng)然，你總是可以自己寫(xiě)一個(gè)簡(jiǎn)單的小程序。

構(gòu)建javascript

為了便于組織代碼和利用npm上的包，寫(xiě)代碼的時(shí)候往往使用module.exports和require()。browserify可以將這些一起打包成單一的腳本。使用browserify很簡(jiǎn)單，只需在package.json中加入一個(gè)['build-js']條目，類(lèi)似這樣：

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

如果是用于生產(chǎn)環(huán)境，還需要壓縮一下。我們只需要將uglify-js加入devDependency，然后直接通過(guò)管道傳遞一下即可：

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

監(jiān)視 javascript

為了能在修改文件之后自動(dòng)重新生成javascript文件，只需將上面的browserify命令換成watchify并加上一些參數(shù)。

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

這里加了-d和-v兩個(gè)參數(shù)，這樣就可以看到詳細(xì)的調(diào)試信息。

構(gòu)建CSS

用cat就可以搞定：

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

監(jiān)視CSS

和上面用 watchify 監(jiān)視 javascript 類(lèi)似，我們用catw監(jiān)視CSS文件的改動(dòng)：

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

序列化子任務(wù)

很簡(jiǎn)單，npm run每個(gè)子任務(wù)，然后用&&連接起來(lái)就成。

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

并行子任務(wù)

類(lèi)似地，我們用&并行子任務(wù)：

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

完整的package.json例子

將上面提到的內(nèi)容組合起來(lái)，package.json大致就是這個(gè)樣子：

{
 "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"
 }
}

生產(chǎn)環(huán)境下，只需運(yùn)行npm run build。如果是本地開(kāi)發(fā)，就用npm run watch。

你也可以坐下擴(kuò)展。比方說(shuō)，如果你希望在運(yùn)行start前先運(yùn)行build，那么你只需寫(xiě)上這么一行：

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

也許你想同時(shí)啟動(dòng)watcher？

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

當(dāng)事情變得非常復(fù)雜的時(shí)候

如果你發(fā)現(xiàn)在單個(gè)scripts條目中塞了一大堆命令，那你可以考慮重構(gòu)一下，把一些命令放到別的地方，比如/bin。

你可以用任何語(yǔ)言編寫(xiě)這個(gè)腳本，比如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

你可能會(huì)吃驚的是，相當(dāng)多的類(lèi)bash語(yǔ)法可以在Windows上工作。不過(guò)我們至少還需要讓;和&可以正常工作。

James Halliday分享過(guò)一些在Windows兼容的經(jīng)驗(yàn)，這些經(jīng)驗(yàn)也適用于本文的主題，可以參考。此外要推薦下win-bash，這是一個(gè)很方便的Windows平臺(tái)上的bash實(shí)現(xiàn)。

總結(jié)

James Halliday希望這個(gè)使用npm run的方式能吸引一部人對(duì)現(xiàn)有的前端自動(dòng)化任務(wù)工具不滿意的人。James Halliday比較偏好unix體系下的那些學(xué)習(xí)曲線陡峭的工具，比如git，或者類(lèi)似 npm 這種在 bash 的基礎(chǔ)上提供極簡(jiǎn)界面的工具。也就是說(shuō)，不需要很多儀式化操作和配合的工具。非常簡(jiǎn)單的工具，已經(jīng)足夠勝任通常的任務(wù)。

如果你對(duì)npm run風(fēng)格不感冒。你也許可以考慮下Makefiles，一個(gè)穩(wěn)定而簡(jiǎn)單，不過(guò)多少有點(diǎn)怪異的替代品。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論