JavaScript 和 Gulpfiles#

¥JavaScript and Gulpfiles

Gulp 允许你使用现有的 JavaScript 知识来编写 gulpfiles 或使用你在 gulpfiles 方面的经验来编写纯 JavaScript。尽管提供了一些实用程序来简化文件系统和命令行的使用,但你编写的其他所有内容都是纯 JavaScript。

¥Gulp allows you to use existing JavaScript knowledge to write gulpfiles or to use your experience with gulpfiles to write plain JavaScript. Although a few utilities are provided to simplify working with the filesystem and command line, everything else you write is pure JavaScript.

Gulpfile 解释#

¥Gulpfile explained

gulpfile 是项目目录中标题为 gulpfile.js(或大写为 Gulpfile.js,如 Makefile)的文件,当你运行 gulp 命令时会自动加载。在此文件中,你经常会看到 gulp API,例如 src()dest()series()parallel(),但可以使用任何普通 JavaScript 或 Node 模块。任何导出的函数都将被注册到 gulp 的任务系统中。

¥A gulpfile is a file in your project directory titled gulpfile.js (or capitalized as Gulpfile.js, like Makefile), that automatically loads when you run the gulp command. Within this file, you'll often see gulp APIs, like src(), dest(), series(), or parallel() but any vanilla JavaScript or Node modules can be used. Any exported functions will be registered into gulp's task system.

转译#

¥Transpilation

你可以使用需要转译的语言(例如 TypeScript 或 Babel)编写 gulpfile,方法是更改 gulpfile.js 上的扩展名以指示语言并安装匹配的转译器模块。

¥You can write a gulpfile using a language that requires transpilation, like TypeScript or Babel, by changing the extension on your gulpfile.js to indicate the language and install the matching transpiler module.

  • 对于 TypeScript,重命名为 gulpfile.ts 并安装 ts-node 模块。

    ¥For TypeScript, rename to gulpfile.ts and install the ts-node module.

  • 对于 Babel,重命名为 gulpfile.babel.js 并安装 @babel/register 模块。

    ¥For Babel, rename to gulpfile.babel.js and install the @babel/register module.

大多数新版本的 Node 支持 TypeScript 或 Babel 提供的大多数功能,但 import/export 语法除外。当仅需要该语法时,重命名为 gulpfile.esm.js 并安装 esm 模块。

¥Most new versions of node support most features that TypeScript or Babel provide, except the import/export syntax. When only that syntax is desired, rename to gulpfile.esm.js and install the esm module.

要更深入地了解此主题以及支持的扩展的完整列表,请参阅我们的 gulp 文件转译 文档。

¥For a more advanced dive into this topic and the full list of supported extensions, see our gulpfile transpilation documentation.

分割 gulpfile#

¥Splitting a gulpfile

许多用户首先将所有逻辑添加到 gulpfile 中。如果它变得太大,可以将其重构为单独的文件。

¥Many users start by adding all logic to a gulpfile. If it ever grows too big, it can be refactored into separate files.

每个任务都可以拆分成自己的文件,然后导入到 gulpfile 中进行组合。这不仅可以让事情井井有条,还可以让你独立测试每个任务或根据条件改变组合。

¥Each task can be split into its own file, then imported into your gulpfile for composition. Not only does this keep things organized, but it allows you to test each task independently or vary composition based on conditions.

Node 的模块解析允许你将 gulpfile.js 文件替换为名为 gulpfile.js 的目录,该目录包含 index.js 文件,该文件被视为 gulpfile.js。然后,该目录可以包含你的各个任务模块。如果你使用的是转译器,请相应地命名文件夹和文件。

¥Node's module resolution allows you to replace your gulpfile.js file with a directory named gulpfile.js that contains an index.js file which is treated as a gulpfile.js. This directory could then contain your individual modules for tasks. If you are using a transpiler, name the folder and file accordingly.