如何将npm做为构建工具使用如何将npm做为构建工具使用

npm的scripts命令可以做其它构建工具所用的一切事情，而且它更加简明、更加优雅、更少的包依赖和更少的维护成本。
npm Script
首先，我需要讲一下npm是如何管理我们的构建脚本的。我们知道npm的构建脚本有npm run-script这个命令(npm run是它的简写)，npm run的第一个参数会关联到scripts对象的一个属性，它会将这个属性的值做为一个命令在操作系统默认的shell中执行。例如，下面的这个package.json：

{ "name": "myproject", "devDependencies": { "jshint": "latest", "browserify": "latest", "mocha": "latest" }, "scripts": { "lint": "jshint **.js", "test": "mocha test/" } }

如果运行npm run lint，npm将开启一个shell并执行jshint **.js，如果运行npm run test，npm将开启一个shell并执行mocha test/。而这个shell环境已经将你的node_modules/.bin文件夹添加到了PATH中，这意味着你安装的任何依赖可以被直接执行--换句话说，你没有必要像./node_modules/.bin/jshint **.js或者$(npm bin)/jshint **.js这样来指定它的路径。
【如何将npm做为构建工具使用】如果你在运行npm run时没有写任何参数，那么npm将会把已经有的所有命令列出来，如：

Available scripts in the user-service package: lint jshint **.js test mocha test/

Shortcut script 为了方便使用，npm也提供了一些命令的快捷使用方式。如：npm test、npm start、npm stop命令等，它们可以省去run。
Pre and Post Hooks 别外一个很酷的特性是，任何npm的script可以设置多个pre-和post-钩子。例如，如果你执行npm run lint，尽管npm预先并不知道lint任务是什么，但它会立即运行npm run prelint，然后再执行npm run lint，最后再执行npm run postlint。pre和postscript也是exit-code-sensitive的，这意味着，如果你的pretestscript以一个非零退出码退出，那么NPM先会立即停止，并且也不会执行再test和posttestscripts。
你不在一个已经是pre-的script上再加一个pre-，例如，prepretest将会被忽略。
你也可以在npm中对一些内部的命令使用pre-和post-，如：install、uninstall、publish和update。你不能覆盖任何内部命令的行为，但是你可以通过pre-和post-来影响他们的行为。这意味着，你可以做像这样一件很酷的事情：

"scripts": { "lint": "jshint **.js", "build": "browserify index.js > myproject.min.js", "test": "mocha test/","prepublish": "npm run build # also runs npm run prebuild", "prebuild": "npm run test # also runs npm run pretest", "pretest": "npm run lint" }

Passing Arguments 在npm中，另一个很酷的特性是：传递参数集合。如下：

"scripts": { "test": "mocha test/", "test:xunit": "npm run test -- --reporter xunit" }

通过这个配制，我们可以简单运行npm run test，它将会执行mocha test/，但是我们可以通过--前辍来扩展它的参数。
例如，npm run test --anothertest.js将会执行mocha test/ anothertest.js，或者更有用的如npm run test -- --grep parser将会?解析为mocha test/ --grep parser（它只会执行名为parser的测试）。
NPM Config Variables 最后一件值得我们注意的事是，npm的package.json中有一个config命令，它使得任意的一系列值可以被包装成为一个在scripts中的环境变量。例如：

"name": "fooproject", "config": { "reporter": "xunit" }, "scripts": { "test": "mocha test/ --reporter $npm_package_config_reporter", "test:dev": "npm run test --fooproject:reporter=spec" }

这里，config中有一个reporter属性，它的值为xunit。这里所有config的属性都暴露给了环境变量，你可以通过加npm_package_config_这个前辍来访问它们。
在上面这个例子中，npm run test命令使用$npm_package_config_reporter变量来获取config中reporter的值。
运行多个任务像Grunt和Culp这样的构建工具都具有将多个任务整合成一个任务的能力。而使用npm时你有两种方式可以选择，这取决于哪种语义更加附合你使用场景。如果你的任务是一个先决条件（例如，将js最小化之前我们要将所有的js代码导到一个文件中），那么使用pre-和post-钩子会是更好的选择。另外你还可以像下面这样使用bash的&&操作符：

"scripts": { "build": "npm run build:css && npm run build:js" }

让我们来看下来这个例子：
我们的package.json的scripts代码如下：

"scripts": { "jslint": "node jslint.js", "csslint": "node csslint.js", "build:css": "node build-css.js", "build:js": "node build-js.js", "build": "npm run build:css && npm run build:js", "prebuild:js": "npm run jslint", "prebuild:css": "npm run csslint" }

下面是几个文件，只是为了在执行它们时打印出信息，代码如下：
jslint.js

console.log("jslint task running...");

csslint.js

console.log("csslint task running...");

build-css.js

console.log("build:css task running...");

build-js.js

console.log("build:js task running...");

当我们执行npm run build时，程序执行顺序如下：

> npm run build:css && npm run build:js> npm run csslint > node csslint.js csslint task running...> node build-css.js build:css task running...> npm run jslint > node jslint.js jslint task running...> node build-js.js build:js task running...

多个任务的流式调用