Cory House 是“ Building Applications with React and Flux ”与“ Clean Code: Writing Code for Humans ”的作者,同时也是 Pluralsight 上众多课程的讲师。他是 VinSolutions 的软件架构师,在全球培训了为数众多的软件开发者,主要领域是前端开发与整洁代码等软件开发实践。Cory 是微软MVP、Telerik 开发者专家,同时也是 outlierdeveloper.com 的创始人。目前,围绕着 Gulp、Grunt 及 npm scripts 社区展开了很多争论,讨论 Gulp 与 Grunt 在项目中是否还有继续使用的必要。有人坚持认为 Gulp 与 Grunt 等前端构建工具依然是不可或缺的,还有些人则认为 Gulp 与 Grunt 是完全没必要使用的,而且还增加了一层抽象,会导致很多问题。近日,Cory撰文谈到了他对于 Gulp、Grunt 与 npm scripts 的认识,并且认为在现在的工程中,我们完全可以抛弃 Gulp 与 Grunt,使用 npm scripts 就可以满足项目之所需。
在本系列的上一篇文章中,我们谈到了诸如 Gulp 与 Grunt 等任务运行器所存在的问题,接下来就来谈谈 npm scripts 的强大功能以及人们为何会忽略 npm scripts。
在构建时我们为何会忽略掉 npm?
我认为有如下 4 点原因造成 Gulp 与 Grunt 等任务运行器变得如此流行:
- 人们认为 npm scripts 需要强大的命令行技巧
- 人们认为 npm scripts 不够强大
- 人们认为 Gulp 的流对于快速构建来说是不可或缺的
- 人们认为 npm scripts 无法实现跨平台运行
下面我就来按照顺序解释一下这些误解。
误解 1:使用 npm scripts 需要强大的命令行技巧
体验 npm scripts 的强大功能其实并不需要对操作系统的命令行了解太多。当然了, grep、sed、awk 与管道等是值得你去学习的,令你众生受用的技能;不过,为了使用 npm scripts,你不必非得成为 Unix 或是 Windows 命令行专家才行。你可以通过 npm 中 1000 多个拥有良好文档的脚本来完成工作。
比如说,你可能不知道在 Unix 中,命令 rm -rf 会强制删除一个目录,这没问题。你可以使用 rimraf 完成同样的事情(它也是跨平台的)。大多数 npm 包都提供了一些接口,这些接口假设你对所用操作系统的命令行了解不多。只需在 npm 中搜索想要使用的包即可,边做边学就行了。过去,我常常会搜索 Gulp 插件,不过现在则是搜索 npm 包了。 libraries.io 是个非常棒的资源。
误解 2:npm scripts 不够强大
npm scripts 本身其实是非常强大的。它提供了基于约定的 pre 与 post 钩子:
{ name: "npm-scripts-example", version: "1.0.0", description: "npm scripts example", scripts: { prebuild: "echo I run before the build script", build: "cross-env NODE_ENV=production webpack", postbuild: "echo I run after the build script" } }
你所要做的就是遵循约定。上述脚本会根据其前缀按照顺序运行。prebuild 脚本会在 build 脚本之前运行,因为他们的名字相同,但 prebuild 脚本有“pre”前缀。postbuild 脚本会在 build 脚本之后运行,因为它有“post”前缀。因此,如果创建了名为 prebuild、build 与 postbuild 的脚本,那么在我输入“npm run build”时,他们就会自动按照这个顺序运行。
此外,还可以通过在一个脚本中调用另一个脚本来对大的问题进行分解:
{ "name": "npm-scripts-example", "version": "1.0.0", "description": "npm scripts example", "scripts": { "clean": "rimraf ./dist && mkdir dist", "prebuild": "npm run clean", "build": "cross-env NODE_ENV=production webpack" } }
在上述示例中,prebuild 任务调用了 clean 任务。这样就可以将脚本分解为更小、命名良好、单职责,单行的脚本。
可以通过 && 在一行连续调用多个脚本。上述示例中,clean 步骤中的脚本会一个接着一个运行。如果你需要在 Gulp 中按照顺序一个接着一个地运行任务列表中的任务,那么这种简洁性肯定会吸引到你。
如果一个命令很复杂,那还可以调用一个单独的文件:
{ "name": "npm-scripts-example", "version": "1.0.0", "description": "npm scripts example", "scripts": { "build": "node build.js" } }
我在上述的 build 任务中调用了一个单独的脚本。该脚本会被 Node 所运行,这样就可以使用我所需的任何 npm 包了,同时还可以利用上 JavaScript 的能力。我还能列出很多,不过感兴趣的读者可以参考这份核心特性文档。此外,Pluralsight 上也有一门关于如何将npm 作为构建工具的课程。还可以看看 React Slingshot 以直观了解其使用方式。
误解 3:Gulp 的流对于快速构建来说是不可或缺的
Gulp 出来后,人们之所以很快就被它吸引过去并放弃 Grunt 的原因在于 Gulp 的内存流要比 Grunt 基于文件的方式快很多。不过,要想享受到流的强大功能,实际上并不需要 Gulp。事实上,流早就已经被内建到 Unix 与 Windows 命令行中了。管道(|)运算符会将一个命令的输出以流的方式作为另一个命令的输入。重定向(>)运算符则会将输出重定向到文件。比如说在 Unix 中,我可以“grep”一个文件的内容,并将输出重定向到一个新的文件:
grep ‘Cory House’ bigFile.txt > linesThatHaveMyName.txt
上述过程是流式的,并不会被写入到中间文件中(想知道如何以跨平台的方式实现上面的命令么?请继续往下读)。
在 Unix 中,还可以通过“&”运算符同时运行两个命令:
npm run script1.js & npm run script2.js
上述两个脚本会同时运行。要想以跨平台的方式同时运行脚本,请使用 npm-run-all 。这就造成了下面这个误解。
误解 4:npm scripts 无法实现跨平台运行
很多项目都会绑定到特定的操作系统上,因此跨平台是一件并不那么重要的事情。不过,如果需要以跨平台的方式运行,那么 npm scripts 依然可以工作得很好。无数的开源项目就是佐证。下面来介绍一下实现方式。
操作系统的命令行会运行你的 npm scripts。因此,在 Linux 与 OS X 上,npm scripts 会在 Unix 命令行中运行。在 Windows 上,npm scripts 则运行在 Windows 命令行中。这样,如果希望构建脚本能够运行在所有平台上,你需要适配 Unix 与 Windows。下面介绍 3 种实现方式:
方式 1:使用跨平台的命令
有很多跨平台的命令可供我们使用。下面列举一些:
&& 链式任务(一个任务接着一个任务运行) < 将文件内容输入到一个命令 > 将命令输出重定向到文件 | 将一个命令的输出重定向到另一个命令
方式 2:使用 node 包
可以使用 node 包来代替 shell 命令。比如说,使用 rimraf 来代替“rm -rf`”。使用 cross-env 以跨平台的方式设置环境变量。搜索 Google、npm 或是 libraries.io ,寻找你所需要的,几乎都会有相应的 node 包以跨平台的方式实现你的目标。如果命令行调用过长,你可以在单独的脚本中调用 Node 包,就像下面这样:
node scriptName.js
上述脚本就是普通的 JavaScript,由 Node 运行。既然是在命令行调用了脚本,那么你就不会受限于.js 文件。你可以运行操作系统所能执行的任何脚本,比如说 Bash、Python、Ruby 或是 Powershell 等等。
方式 3:使用 ShellJS
ShellJS 是个通过 Node 来运行 Unix 命令的 npm 包。这样就可以通过它在所有平台上运行 Unix 命令了,也包括 Windows。
我在 React Slingshot 上同时使用了方式 1 与 2。
本文主要介绍了人们对于 npm scripts 存在的误解,以及 npm scripts 自身所提供的强大功能。借助于操作系统提供的各种基础设施、npm scripts 以及各种命令,我们完全可以通过 npm scripts 以更加轻量级的方式实现 Gulp 与 Grunt 等任务运行器所提供的功能。
本系列的下一篇文章将会介绍 npm scripts 中存在的一些痛点以及应对之道。
评论 2 条评论