在一定程度是，你無(wú)論如何都要使用npm，而同時(shí)npm提供了腳本功能，所以你在命令行中使用的命令都可以在 npm Scripts 中使用。你可以通過(guò)使用npm scripts替代gulp 這篇文章來(lái)了解npm scripts（相比gulp這類(lèi)工具）的好處。
你可以克隆我的demo來(lái)查看npm-scripts-demo
1. npm scripts?
npm scripts 是記錄在?package.json?中的?scripts?字段中的一些自定義腳本，使用自定義腳本，用戶(hù)可以將一些項(xiàng)目中常用的命令行記錄在?package.json中，不需要每次都要敲一遍。
{
????// ...
????"scripts": {
????????"build": "node build.js"
????}
}
終端運(yùn)行npm run build 等同于 node build.js
小技巧
通過(guò)?npm run 來(lái)查看所有的 scripts 命令
通過(guò) npm ls --depth 0 列出已安裝的 package
通過(guò) npm run env可以列出當(dāng)前項(xiàng)目的所有環(huán)境變量（通過(guò) env 可以列出系統(tǒng)的所有環(huán)境變量）
2. package.json配置
{
????"name": "npm-scripts-demo",
????"version": "1.0.0",
????"description": "",
????"main": "index.js",
????"scripts": {
????????"presass": "echo before run sass",
????????"sass": "node-sass src/style/index.scss src/dest/index.css",
????????"postsass": "echo after run sass && echo $PATH",
????????"remove" : "rm -rf src/dest",
????????"scss": "node-sass --output-style compressed -o src/dist/css src/style",
????????"lint": "eslint src/js",
????????"uglify": "mkdir -p dist/js && uglifyjs src/js/*.js -m -o dist/js/app.js",
????????"view": "echo $npm_package_name"，
????????"viewjs": "node src/js/view.js"
},
????"devDependencies": {
????????"eslint": "^4.12.0",
????????"node-sass": "^4.7.2",
????????"uglify-js": "^3.2.0"
????},
????"author": "",
????"license": "ISC"
}
3. 工具
node-sass: 解析scss文件
eslint： 代碼檢查
uglify：壓縮js代碼
onchange：監(jiān)聽(tīng)文件變化
4.?環(huán)境變量PATH
環(huán)境變量（$PATH）：決定了shell將到哪些目錄中尋找命令或程序，PATH的值是一系列目錄，當(dāng)運(yùn)行一個(gè)程序時(shí)，Linux在這些目錄下進(jìn)行搜尋編譯鏈接。通過(guò)運(yùn)行?echo $PATH 查看當(dāng)前的搜索路徑。運(yùn)行npm run env可以列出所有環(huán)境變量。
npm 腳本的原理：當(dāng)執(zhí)行npm run，就會(huì)自動(dòng)新建一個(gè) Shell，在這個(gè) Shell 里面執(zhí)行指定的腳本命令。因此，只要是 Shell可以運(yùn)行的命令，就可以寫(xiě)在 npm 腳本里面。
腳本執(zhí)行之前它會(huì)將node_modules/.bin/加入到環(huán)境變量PATH中，所以在 npm scripts 中可以直接使用那些存在于node_modules/.bin/中的可執(zhí)行文件。執(zhí)行結(jié)束后，再將PATH變量恢復(fù)原樣。
可以：
"sass":"node-sass src/style/index.scss src/dest/index.css",
而不用：
"test":"./node_modules/.bin/node-sass src/style/index.scss src/dest/index.css"
運(yùn)行 npm run sass 來(lái)查看環(huán)境變量的變化。
5.?鉤子
在 npm script 中存在兩個(gè)鉤子，pre和post，sass腳本命令的鉤子就是presass和postsass
"presass": "echo before run sass",
"sass": "node-sass src/style/index.scss src/dest/index.css",
"postsass": "echo after run sass",
npm提供的默認(rèn)鉤子：
prepublish, publish, postpublish：發(fā)布模塊
preinstall, install, postinstall：安裝模塊
preuninstall, uninstall, postuninstall：卸載模塊
preversion, version, postversion：在使用npm version 修改版本號(hào)的時(shí)候執(zhí)行
pretest, test, posttest：執(zhí)行?npm test?的時(shí)候
prestop, stop, poststop：執(zhí)行?npm stop?的時(shí)候
prestart, start, poststart：執(zhí)行?npm start?的時(shí)候
prerestart, restart, postrestart：執(zhí)行?npm restart?的時(shí)候
6.?變量
通過(guò)npm_package_前綴，npm 腳本可以拿到package.json里面的所有字段。比如，對(duì)于上面第2點(diǎn)的package.json，
// view.js
console.log(process.env.npm_package_name); //? npm-scripts-demo ,
console.log(process.env.npm_package_version); // 1.0.0
console.log(process.env.npm_package_scripts_lint); //?eslint src/js
運(yùn)行 npm run viewjs
參考：
