拿 npm 来做构建工具

内容简介：拿 npm 来做构建工具

在 node 中，npm 绝对是个好东西，一个 package.json 可以干好多事情，一个小小的 Node 项目，从初始化到发布，npm 就像一个管家一般帮你打理好所有的事情。

grunt，gulp，makefile 党

当你开始一个相对有点复杂度的项目时，你会考虑需要构建的时候咋办，脑子里会迅速浮现 grunt，gulp，makefile 等。很原谅我多啰嗦几句，分别说下我对这三者的看法：

grunt

在 node 中算最经典的一个构建工具，开辟了前端在 node 中华丽丽的构建事业，很多前端开始关注使用 node 来处理 css 预处理，js 语法和风格检查，js压缩等等。我最先接触和使用的也是它，学习成本其实还好，官方文档过一遍就可以上手，但是个人很不喜欢写配置，并且配置相对比较受限制。

gulp

典型的长江后浪，用来拍 grunt 这个前浪，使用 stream 来大大提高构建速度，同时抛弃配置，直接用 node 来编写构建脚本，随着知名度越来越大，插件也在慢慢完善，个人主要喜欢它不用写配置，而且足够自由的优点，速度倒是暂时没有多大需求。

makefile

一个古老而优雅的东西，但是对于不大熟悉 shell 的人来说会比较困难（包括我，感觉很多前端这方面都比较弱），既然动用了 shell 了，那么 makefile 其实功能是强大得不行的（但是比较难深入），但是由于不好上手选择使用的不多，我在编写一些比较简单的构建命令时会用到。

接下来进入主题，使用 npm 来做构建，能看到这里，你应该会想到了一些东西了。

npm scripts 的配置

了解 node 的人都知道 package.json 有这么一个配置， scripts ，可以在这里配置一些命令或者执行脚本，类似：

"scripts": {
 "test": "./node_modules/.bin/mocha"
}

然后便可以使用 npm run test 或者 npm run-script test 来运行对应的命令，感觉有点像 makefile 是不是，这样的话，我们可以配置构建使用的一些命令了，例如 build，test，compile，lint 等。

其中，npm 还提供了便捷写法，如 npm start, npm test, npm stop, npm restart 。

还需要提到的一点是，这些命令都是可以使用 -- 来传参的： npm test -- index.js 这样便是: ./node_modules/.bin/mocha index.js 。

用 pre 和 post 来添加 hook

npm 的 scripts 配置中同样提供了 hook 的功能，脚本名称的配置添加 pre 或者 post 前缀即可了，例如每次发布前都要跑一次构建，然后每次构建前都要跑一次测试，那么可以像这样：

"scripts": {
 "build": "...",
 "test": "...",
 "prepublish": "npm run build",
 "prebuild": "npm run test"
}

这样子，hook 是支持 npm 内置的命令的，如上述的 publish，还有 install，uninstall，version 等。

即是你可以用 pre 来写构建命令响应的依赖任务，然后 post 来做善后的工作，不错吧。

用 config 来配置变量

如果执行的命令太长，有点可以会调整的或者重用的希望设置为一个变量呢？makefile 是支持这么干的，npm 照样可以。

首先，在 package 的各个配置项都是可以读出来的，然后你可以在 config 配置项中来定义一些需要的变量，见下：

"name": "test",
"config": {
 "bin": "./node_modules/.bin"
},
"scripts": {
 "test": "$npm_package_config_bin/mocha $npm_package_name"
}

写起来是有点长，但是相当实用， $npm_package_ 便是取 package 下的配置项， $npm_package_config_ 便是取 config 配置项里边对应的内容。

利用各大 module 提供的 bin

grunt 或者 gulp 都提供了插件，但是其实大部分插件都有它的原始的 module 包，我们可以直接拿来在 npm 中使用。

我们举个例子，就拿 jshint 来说，直接安装到 devDependencies 中去，然后一个 ./node_modules/bin/jshint 运行即可，不能再简单了。

同样地，包括 css 预处理，css 后处理，js 压缩，babel，测试框架等，大多数都提供了需要的 bin。

这里可能会遇见一个问题，就是处理多文件，类似 *.js, *.min.css ... 这种，其实这个来源于 Unix 中的 glob 命令，node 中有以下模块可以用来做类似的处理：minimatch，glob。这些模块已经是大多数应用模块的依赖，你可以直接使用，类似 jshint *.js

如果需要多个任务的执行，如同在 makefile 中，我们可以使用 shell 中的 && 和 , ，如果需要使用流，则用 | ， > ， < 来处理。

至于很多人关心的 watch 和 livereload 功能，相应的 watch 和 live-reload 包都可以搞定。

用 node 来编写构建脚本

有的时候，模块提供的功能还不能满足你的需求，并且你没法写一大堆长长的命令，那么直接上 node 脚本，这便是自由，想怎么来就怎么来。

还是举个例子，如果你的静态文件构建时文件名加了内容 hash，你希望构建的时候把 html 里边所有的静态文件名都带上对应的 hash，其实用 node 直接写个遍历 html 内容然后匹配替换就好了，你不用再去苦苦找插件，并且代码都是可控的，不依赖其他人，以后需要新功能，自己补充就好了。

写好脚本之后，需要的就是：

"scripts": {
 "build": "node build.js"
}

直接使用 node 跑编写好的脚本就可以了。

综上所述，npm 提供的功能足够让我们把其当成构建 工具 来使用，很多项目其实已不需要再放一个 gulp 或者 makefile 来处理构建任务了，package.json 就足够了。

我个人是喜欢上直接用 npm 来做这些事情了，毕竟，项目目录看起来越干净越好，不是么？

以上所述就是小编给大家介绍的《拿 npm 来做构建工具》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

关注我们，获取更多IT资讯^_^

查看所有标签

• （翻译）前端构建工具的比较
• Web 前端项目的构建工具
• 前端为什么需要构建工具？
• Web 前端项目的构建工具
• 30+微服务构建的顶级工具
• 使用fastText构建学科分类工具

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。