使用 TypeScript 的 Gulp 工作流

• 下载外部链接

引言

JavaScript 的标准在不断变化，并且不同的 ECMA 脚本版本被不同的厂商在不同的时间采用。Google Angular 开发团队采用了微软的 TypeScript 开源项目，用于他们最新的 Angular2 框架重写。这使得所有现有的 Angular 投资都处于过渡状态。

本技巧的目标是提供一个将现有的 Angular 应用程序迁移到使用 TypeScript 来编写 Gulp 构建工作流的第一步。

从个人角度来说，我更喜欢结构良好的代码，能够将其划分为不同的部分，而不是被 DevOps 代码所淹没。 TypeScript 允许我们在 Gulp 任务中编写可重用的类。

背景

本技巧假定您具备 Node.js、Gulp 和 Angular Js 的基本知识。

设置项目

请确保您已安装以下软件

1. 适用于您选择的操作系统版本的 Git
2. Node.js
3. Visual Studio Code

要获取本技巧的源代码，请使用 Git 像这样克隆它

> git clone -b 01-init https://github.com/kdcllc/Angular-TypeScript-Starter.git

如果您尚未在您的机器上安装 Git 并且想按照步骤操作，您可以从 这里 下载源代码。

项目下载并创建在您的机器上后，导航到项目并运行以下命令

> code .

这将会在 Visual Studio Code 中打开源代码。

接下来，运行以下命令

1. Npm install - 这将下载所有项目依赖项并将其安装在项目目录中
2. Tsd install – 这将安装项目的全部定义类型文件。

   

3. Gulp – 这将运行用 TypeScript 编写的默认 Gulp 任务。

   

所以，如果您按照上述步骤操作并成功执行了您第一个用 TypeScript 编写的 Gulp 任务 - 恭喜！

现在，让我们重点介绍项目设置。

• 首先，npm package ts-node 允许执行 Gulpfile.ts。
• 其次，tsconfig.json 文件包含 TypeScript 编译设置。
• 第三，tools/typings/tsd 文件夹包含我们将用于我们工具的所有定义类型文件。

总结

该项目包含最少量的代码，但允许您开始将现有的基于 JavaScript 的 Gulp 工作流转换为基于 TypeScript 的 Gulp 工作流。