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

npmscripts命令可以做其它构建工具所用的一切事情,而且它更加简明、更加优雅、更少的包依赖和更少的维护成本。

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 lintnpm将开启一个shell并执行jshint **.js,如果运行npm run testnpm将开启一个shell并执行mocha test/。而这个shell环境已经将你的node_modules/.bin文件夹添加到了PATH中,这意味着你安装的任何依赖可以被直接执行--换句话说,你没有必要像./node_modules/.bin/jshint **.js或者$(npm bin)/jshint **.js这样来指定它的路径。

如果你在运行npm run时没有写任何参数,那么npm将会把已经有的所有命令列出来,如:

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

Shortcut script

为了方便使用,npm也提供了一些命令的快捷使用方式。如:npm testnpm startnpm stop命令等,它们可以省去run

Pre and Post Hooks

别外一个很酷的特性是,任何npmscript可以设置多个pre-post-钩子。例如,如果你执行npm run lint,尽管npm预先并不知道lint任务是什么,但它会立即运行npm run prelint,然后再执行npm run lint,最后再执行npm run postlintprepostscript也是exit-code-sensitive的,这意味着,如果你的pretestscript以一个非零退出码退出,那么NPM先会立即停止,并且也不会执行再testposttestscripts。

你不在一个已经是pre-的script上再加一个pre-,例如,prepretest将会被忽略。

你也可以在npm中对一些内部的命令使用pre-post-,如:installuninstallpublishupdate。你不能覆盖任何内部命令的行为,但是你可以通过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

最后一件值得我们注意的事是,npmpackage.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变量来获取configreporter的值。

运行多个任务

GruntCulp这样的构建工具都具有将多个任务整合成一个任务的能力。而使用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...

多个任务的流式调用

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容

  • 一、什么是 npm 脚本? npm 允许在package.json文件里面,使用scripts字段定义脚本命令。 ...
    猪猪9527阅读 388评论 0 0
  • 关键词:npm 定义:npm 允许在package.json文件里面,使用scripts字段定义脚本命令。 上面代...
    ferrint阅读 13,595评论 2 6
  • 什么是 NPM npm之于Node,就像pip之于Python,gem之于Ruby,composer之于PHP。 ...
    ihoey阅读 6,247评论 2 36
  • 原文链接:http://www.jianshu.com/p/6b816c609669 前传 出于兴趣最近开始研究k...
    悬笔e绝阅读 7,197评论 1 11
  • 4月的最后一天,我来了一场期待已久的骑行。刚刚突然想起来,现在居然在做一件很是巧合的事情。四月份开头写过一篇文章...
    冰鱼儿阅读 426评论 0 1