在前端開發(fā)工作中，為了避免重復(fù)的工作，我們通常會(huì)借助一些任務(wù)運(yùn)行器去完成常見的前端任務(wù)，例如文件合并，腳本壓縮，生成sprite圖。世面上有很多這樣的工具，比較成熟的有 grunt ， gulp ， webpack ， shell ， ant 。使用這些工具可以大大的提高我們的日常產(chǎn)出，讓我們把開發(fā)的重心放在項(xiàng)目本身的業(yè)務(wù)上，而不必在常見任務(wù)上浪費(fèi)過多的時(shí)間。我們不去討論這些工具之間的優(yōu)勢(shì)和差異，一千個(gè)讀者就有一千個(gè)哈姆雷特。在工作中，我使用過的前端任務(wù)工具包括但不限于 grunt ， gulp ，他們的確給我?guī)砹撕芏嗟膸椭?，?dāng)我發(fā)現(xiàn) npm scripts 命令就能很好的完成這些任務(wù)時(shí)，我不得不跟他們告別。相較于 grunt 和 gulp ， npm scripts 具有更大的優(yōu)勢(shì)，使用 npm scripts 執(zhí)行構(gòu)建自動(dòng)化是一種更簡(jiǎn)單的方式。
npm scripts npm scripts 需要強(qiáng)大的命令行技巧 npm scripts 不夠強(qiáng)大 Gulp 的流對(duì)于快速構(gòu)建來說是不可或缺的 npm scripts 無法實(shí)現(xiàn)跨平臺(tái)運(yùn)行 npm scripts 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)寫，你可以使用 npm run 來運(yùn)行 scripts 里的任何條目。
使用 npm run 的方便之處在于， npm 會(huì)自動(dòng)把 node_modules/.bin 加入 $PATH ，當(dāng)腳本內(nèi)容結(jié)束，則子shell關(guān)閉，回到父shell中，這樣你可以直接運(yùn)行依賴和開發(fā)依賴程序，不需要全局安裝了，只要 npm 上的包提供命令行接口，你就可以直接使用它們。
package.json 模板 我們的構(gòu)建腳本命令放在 scripts 對(duì)象里，對(duì)于想使用的工具依賴庫(kù)都放在 devDependencies 對(duì)象里。
SCSS 將 scss 編譯為 css ，使用 node-sass .
node-sass 命令行輸入：
npm install --save-dev node-sass 或者 npm install -D node-sass
安裝完成后，我們可以使用 node-sass 工具來構(gòu)建我的任務(wù)： node-sass --output-style compressed -o dist/css src/sass
上面的命令行功能比較容易理解，就是 src/sass 下的 *scss 文件編譯成 css 文件，并輸出到 dist/css 目錄下，文件內(nèi)容的輸出風(fēng)格為 compressed ，輸出風(fēng)格可以任意選擇，可以使用 node-sass help 查看幫助。
package.json 的 scripts 對(duì)象里 把上面的代碼放到 package.json 文件里， package.json 的內(nèi)容變成：
package.json
運(yùn)行任務(wù)
npm run scss
PostCSS 自動(dòng)補(bǔ)全 CSS 瀏覽器廠商前綴 用到的庫(kù) postcss-cli ， autoprefixer
postcss-cli , autoprefixer npm install -D postcss-cli autoprefixer
package.json
可以通過設(shè)置 autoprefixer 的相關(guān)參數(shù)來改變 autoprefixer 默認(rèn)瀏覽器支持。
javascript npm i -D eslint 或者使用 npm install --save-dev eslint ，前者是后者的簡(jiǎn)寫方式。
hint 的基本規(guī)則 eslint --init
package.json 的 scripts 對(duì)象里 package.json
運(yùn)行任務(wù)
npm run lint
javascript 依賴庫(kù) uglify-js
npm i -D uglify-js
package.json 的 scripts 對(duì)象里 package.json
運(yùn)行任務(wù)
npm run uglify
依賴庫(kù) imagemin-cli
npm i -D imagemin-cli
package.json 的 scripts 對(duì)象里 package.json
運(yùn)行任務(wù)
npm run imagemin
依賴庫(kù) BrowserSync
npm i -D browser-sync
package.json 的 scripts 對(duì)象里 package.json
監(jiān)聽css和javascript的改變
依賴庫(kù)： onchange
npm i -D onchange
package.json 的 scripts 對(duì)象里 package.json
使用 npm scripts 鉤子創(chuàng)建任務(wù)
pre- 和 post- 腳本命令， npm run 為每條命令提供了 pre- 和 post- 兩個(gè)鉤子(hook)。以 npm run install 為例，如果我們的 scripts 字段定義了 postinstall ：
package.json
執(zhí)行 npm run install 時(shí)，任務(wù) postinstall 也會(huì)立即執(zhí)行，在團(tuán)隊(duì)里，這是一種非常好的協(xié)作方式，當(dāng)有人克隆我們的代碼后，執(zhí)行 npm install ，我們的 watch:all 任務(wù)也會(huì)跟著執(zhí)行，它會(huì)自動(dòng)的開啟一個(gè)服務(wù)器并打開默認(rèn)的瀏覽器，同時(shí)也會(huì)監(jiān)聽文件的修改。
scripts 字段可以使用一些內(nèi)部變量，主要是 package.json 的各種字段。內(nèi)部變量的主要特征是 $npm_package_key 。
比如， package.json 的內(nèi)容是
那么變量 $npm_package_name 的值是 mobile-scaffold ，變量 npm_package_version 的值是 1.0.0 。
運(yùn)行 npm run bundle 以后，將會(huì)生成 build/1.0.0/ 子目錄。
config 字段也可以用于設(shè)置內(nèi)部字段。
上面代碼中，變量 npm_package_config_port 對(duì)應(yīng)的就是 3000 。
npm run 命令可以接收參數(shù) 在一些任務(wù)里，我們需要根據(jù)不同的情形來傳遞參數(shù)，最常見的例子就是提交 git commit -m 需要填寫一些信息，這時(shí)， npm run 能接收參數(shù)就顯得非常重要了。
package.json 的內(nèi)容是：
運(yùn)行 npm run ci -- 'add git command task' ，這條命令執(zhí)行后，相繼發(fā)生：
preci 任務(wù)執(zhí)行 ci 任務(wù)執(zhí)行 postci 任務(wù)執(zhí)行 顯然，使用 npm scripts 也存在著一些問題： JSON 規(guī)范并不支持注釋，因此無法在 package.json 中添加注釋。不過有一些辦法可以突破這個(gè)限制：
聯(lián)系客服
