65.9K
CodeProject 正在变化。 阅读更多。
Home

Gulp 工作流与 TypeScript 添加环境支持

King David Consulting LLC
starIconstarIconstarIconstarIconstarIcon

5.00/5 (1投票)

2016年2月3日

CPOL

6分钟阅读

viewsIcon

16186

Gulp 工作流与 TypeScript 添加环境支持

引言

在我之前的技巧“使用 TypeScript 的 Gulp 工作流”中，我为 Gulp 构建工作流建立了一个种子项目，该项目原生运行TypeScript Gulpfile.ts 文件，而不是Gulpfile.js。这个种子项目是 ASP.NET MVC、Angular、Express 等项目的绝佳起点。基本设置也适用于 Visual Studio.NET 2013-2015 和 Visual Studio Code。在本技巧中，我将为 Gulp 构建系统添加自定义构建环境变量。这些变量将在以后的技巧中用于根据目标环境处理不同的构建操作。

背景

Microsoft ASP.NET 拥有强大的 JavaScript、CSS 和其他资源的优化引擎，开发人员可以利用它为 Web 项目进行打包、优化和构建现代 Web 应用程序。这个优化引擎基于 Visual Studio.NET 解决方案的环境设置，构建框架已内置到 Visual Studio.NET 的工具中。在开源社区中，每个项目都必须开发自己的构建工具和方法来支持各种构建输出。为了我们的目的，我们将专注于开发和生产环境路径。

默认情况下，Gulp 命令行界面 (CLI) 支持通过命令行扩展变量输入的能力。我将使用 YARGS npm 包。以实现以下命令行语法

> Gulp --env prod

由于我们将使用 TypeScript 来实现我们的功能，请记住，虽然 TypeScript 不能与 C# 或 Java 等语言的类型系统相提并论，但它使我们能够在项目中声明类型。类型系统非常灵活，允许我们编写适合我们需求的自定义类型定义，或者使用 tsd 实用工具从开源社区安装预定义的类型定义。

Using the Code

要开始，我们需要按照以下方式克隆本技巧的基础代码

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

如果您尚未在计算机上安装 Git 并希望遵循这些步骤，您可以在此处下载源代码。

该项目不包含其依赖项，我们需要运行以下命令

> npm i

> tsd install

正如您所见，我们需要执行两个不同的命令才能下载项目依赖项。有没有办法通过运行一个命令来完成？我喜欢您的批判性思维！实际上有一种方法可以用一个命令来完成。Package.json 文件包含有关 Node.js 项目执行环境的信息，在“scripts”节点下，您可以添加以下内容

 "postinstall": "tsd install"

当您运行 npm install 时，tsd 实用工具将在 npm 依赖项安装完成后运行，因此这是安装后操作。

现在，让我们来处理 Yargs npm 库的 TypeScript。根据 Microsoft TypeScript 文档，编写自定义类型定义文件的最佳方法是利用关于如何使用 npm 库的文档，而不是通过库的源代码。以下是该库的基本用法

var argv = require('yargs').argv;
 if (argv.ships > 3 && argv.distance < 53.5) {
    console.log('Plunder more riffiwobbles!');
}  else {
    console.log('Retreat from the xupptumblers!');
}

正如您所见，argv 变量有两个属性，ships 和 distance，用于解析特定逻辑。

在我们的例子中，我们希望拥有 env 属性，它使我们能够传递一个设置为“dev”或“prod”的 string。我将使用 TypeScript 如下表达这个业务需求

/*
    Custom file definition to support projects specific inputs
*/
declare namespace yargs {
   var argv: InputDef;
}

interface InputDef {
    env: string;
}

declare module 'yargs' {
    export = yargs
}

我们将通过在tools/typings/yards.ts 中创建一个名为 yargs.ts 的新文件来为 yargs 包添加一个新的类型定义文件，并粘贴上面的代码。虽然这个 npm 库有其他可用的类型定义文件，但我更喜欢编写一个特定的自定义版本，以适应我的库使用方式。

在撰写本技巧时，我发现 TypeScript 编译器存在一个问题。它在 Visual Studio Code IDE 中识别自定义类型，但当您尝试编译代码时，它无法加载模块。如果您想跟踪此问题，此处是链接。

要解决编译器问题，我们必须通过在tools/typings/ 目录下创建 custom.d.ts 文件来添加类型定义文件引用。粘贴以下文件引用

/// <reference path="yargs.ts" />

据我理解，TypeScript 编译器会查找带有 *.d.ts 扩展名的文件来解析类型。这可能不是一个 bug，而是一个未文档化的设计特性。

至此，我们已经拥有了 YARGS 库的自定义基本类型定义，它适用于我们将要完成的工作。

我更喜欢将我的 Gulp 任务和支持文件结构化在项目下的 tools/ 目录中。由于我们将为应用程序添加功能，因此请在 tools/utils 目录下创建一个名为 application.ts 的文件。然后添加以下代码

import {argv} from 'yargs';

export const ENVIRONMENTS = {
    DEVELOPMENT: 'dev',
    PRODUCTION: 'prod'
};

/*
    retreive environment variable that is passed into the system
*/
export function getEnvironment(): string {
    if (argv.env != null) {
    
        if (argv.env === ENVIRONMENTS.PRODUCTION) {
            return ENVIRONMENTS.PRODUCTION;
        } else {
            //ability to extend more environments from here
            return ENVIRONMENTS.DEVELOPMENT;
        }
    } else {
        return ENVIRONMENTS.DEVELOPMENT;
    }
}

正如您所见，我使用了 export 函数语法而不是类。这是我的偏好，尽管我们并不局限于使用其中任何一种。这就是 JavaScript 动态特性创造了许多完成同一件事的不同方法的地方。在此代码片段中重要的是我们导入“yargs”库，并且 Visual Studio Code 识别它为有效库。但是，如果我们尝试运行我们的 gulp 任务，我们会收到一个错误。这是因为我们的 package.json 文件中没有“yargs”库引用。要解决这个问题，请运行以下命令

> npm i --save-dev yargs

此命令将向 package.json 文件中的 devDependencies 添加引用，它还将把“yargs”库下载到 node_modules 中。

我们即将完成一个可用的 Gulp 任务版本，该任务可以读取环境设置并将其输出到控制台。

为了有一个集中的配置文件来处理我们所有未来的 Gulp 任务，让我们在 tools/ 目录下创建一个名为 “config.ts” 的文件，然后粘贴以下内容

import {getEnvironment} from './utils/application';
export const ENV = getEnvironment()

由于我们有了检索环境设置的通用功能，现在我们可以将默认任务修改为以下内容

import * as gulp from 'gulp';
import {ENV} from './tools/config';
gulp.task('default', done => {
    console.log('Enviroment is set to:', ENV);
});

尝试运行以下命令查看结果

>  gulp 
>  gulp –-env prod

您应该会看到随着命令行开关的变化，环境输出也随之变化。

其他信息

Node.js 是一个强大的服务器端 JavaScript 执行引擎，它利用 Google Chrome 8 JavaScript 执行引擎运行在许多不同的操作系统上。因此，该项目可以在 Node.js 支持的任何操作系统上运行。

我正在使用 Windows 10 来开发和测试代码。请随时为其他操作系统提供遗漏的步骤等信息。

结论

在本技巧中，我们分步创建了一个自定义的可重用应用程序实用工具，用于根据 YARGS 库读取环境目标。我们还编写了自己的自定义类型定义。在未来的技巧中，我希望使用此代码来创建基于不同环境的不同构建路径。

历史

  • 2016年03月02日 首次发布
© . All rights reserved.