使用Jade和Grunt加快HTML的产生

Whenever we talk about building a web application, we need to talk about language preprocessors (transforming source code written in a particular language to target code in a native language). Often you’ll find yourself using languages that aren’t natively supported by web browsers because they help you wrap away repetitive work by providing features not available in plain HTML (e.g. Jade), CSS (e.g. Sass) and JavaScript (e.g. CoffeeScript).

每当我们谈论构建Web应用程序时，我们都需要谈论语言预处理器(将以特定语言编写的源代码转换为以本地语言为目标的代码)。 通常，您会发现自己使用的是 络浏览器本身不支持的语言，因为它们通过提供纯HTML(例如Jade)，CSS(例如Sass)和JavaScript(例如CoffeeScript)不提供的功能来帮助您打包重复性工作。

An HTML template engine is a preprocessor that gives us the ability to write dynamic and reusable HTML documents that follows the (DRY) principle of application design.

HTML 模板引擎是一个预处理器，它使我们能够遵循应用程序设计的( DRY )原理编写动态且可重复使用HTML文档。

Jade is an open source HTML templating language for Node.js (server-side JavaScript). Jade is totally free to use and provides fast, easy, and fun HTML. It is heavily influenced by Haml, and it was originally created in Node as a module. It typically includes features common to most high-level programming languages, with an emphasis on processing plain text.

Jade是Node.js(服务器端JavaScript)的开源HTML模板语言。 Jade完全免费使用，并提供快速，简便和有趣HTML。 它受Haml的影响很大，它最初是在Node中作为模块创建的。 它通常包括大多数高级编程语言所共有的功能，并着重于处理纯文本。

When using modern CSS frameworks like Bootstrap and Foundation, most of the development becomes entirely about producing HTML, which brings out the power of Jade. Once you start using it, it’ll become an indispensable tool for you.

当使用现代CSS框架(如Bootstrap和Foundation)时，大部分开发工作完全是关于产生HTML的，这产生了Jade的强大功能。 一旦开始使用它，它将成为您不可缺少的工具。

In this tutorial I am going to introduce how to accelerate HTML production and inject plain data with Jade features in conjunction with Grunt.

在本教程中，我将介绍如何加快HTML的产生以及结合Grunt使用Jade功能注入纯数据。

Our toolset for this tutorial will include:

本教程的工具集将包括：

• Jade

  玉

• Grunt

  咕unt声

• NodeJS

  节点JS

准备环境：安装 (Preparing the Environment: Installation)

Here are the steps for installing Node.js, Jade, and the Grunt command-line interface (CLI). If you already have these installed, you can skip down to the next section in the tutorial.

这是安装Node.js，Jade和Grunt命令行界面(CLI)的步骤。 如果已经安装了这些工具，则可以跳至教程的下一部分。

1. Go to nodejs.org, and click on the “Install” button to download the latest version of node. Execute the downloaded file and follow the installation instructions.

   转到nodejs.org ，然后单击“安装”按钮以下载最新版本的节点。 执行下载的文件，然后按照安装说明进行操作。

2. npm (Node Package Manager) will come bundled with Node, and can be used via the terminal. Open your terminal and execute in the project directory. Then follow the instructions to create .

   npm(Node Package Manager)将与Node捆绑在一起，并且可以通过终端使用。 打开终端并在项目目录中执行 。 然后按照说明创建 。

3. To install Grunt, enter

   要安装Grunt，请输入

4. Install the Grunt CLI (command-line interface) to execute tasks straight from the command line.

   安装Grunt CLI(命令行界面) 可以直接从命令行执行任务。

5. To install the Grunt plugin for Jade tasks, type

   要为Jade任务安装Grunt插件，请键入

6. To install Jade, type

   要安装Jade，请键入

NOTE:: There are three flags for installing npm packages:

注意：：安装npm软件包有三个标志：

1. means those packages are required locally for the project and listed under the dependencies property.

   表示这些软件包对于项目是本地必需的，并在dependencies属性下列出。

2. adds the packages locally but as development dependencies. They are listed under devDependencies in .

   在本地添加软件包，但将其作为开发依赖项。 它们在 devDependencies下列出。

3. indicates the package should be installed globally; this lets you execute grunt in your terminal, regardless of the current working directory.

   表示该软件包应全局安装； 这样，无论当前工作目录如何，您都可以在终端中执行grunt。

A manifest file will be created, which indicates a list of packages the project depends upon, and it includes some meta data such as project name, version, and description.

将创建一个清单文件，该文件指示项目所依赖的软件包的列表，其中包括一些元数据，例如项目名称，版本和描述。

After the installation your manifest will look like the following:

安装后，您的清单将如下所示：

In addition, a directory will be created and will include the npm modules installed earlier as and .

另外，将创建一个目录，其中将包含先前安装为和的npm模块。

什么是咕unt声(What is Gruntspan style=”font-weight: bold;”>)

I’ll introduce you to Grunt, a popular task runner, we will use it to automate and execute time-consuming command line tasks in your development workflow. A task is an action that produces a target like compiling Jade to generate HTML. Using Grunt, we will be able to run Jade, watch tasks, and perform any other task with only one command line. It’s okay if you’ve never heard of a task runner before; it’s not a hard concept to wrap your head around.

我将向您介绍流行的任务运行器Grunt，我们将使用它在您的开发工作流程中自动化并执行耗时的命令行任务。 任务是产生诸如编译Jade以生成HTML之类的目标的动作。 使用Grunt，我们将能够仅使用一个命令行来运行Jade，监视任务以及执行任何其他任务。 如果您以前从未听说过任务执行程序，那也可以； 缠头不是一个难的概念。

Grunt is not the absolute best tool for this job. If you are curious about using other build tools, you can check out these resources: How to Use npm as a Build Tool or An Introduction to Gulp.js.

Grunt并不是完成这项工作的绝对最佳工具。 如果您对使用其他构建工具感到好奇，可以查看以下资源： 如何将npm用作构建工具或Gulp.js简介 。

创建Gruntfile.js (Creating Gruntfile.js)

Grunt uses to load any task and configure it with any parameters you need, as I’ll show you along the way.

Grunt使用加载任何任务，并使用任何参数对其进行配置，正如我将介绍的那样。

Grunt tasks are configured by passing an object to the method, defining the affected files by the task and passing in a few other options. Learn more about Grunt.

通过将对象传递给方法，配置任务定义受影响的文件并传递其他一些选项，可以配置Grunt任务。 了解有关Grunt的更多信息 。

The method defines a task that will be executed when we run via the command line. The array indicates the tasks that will run respectively for accomplishing the build process.

方法定义了一个任务，当我们通过命令行运行时将执行该任务。 数组指示将分别运行以完成构建过程的任务。

To begin with, this is the minimum code:

首先，这是最小的代码：

设置咕unt玉任务 (Setting up the Grunt Jade Task)

We’ll create our basic Gruntfile and put the following code inside it:

我们将创建基本的Gruntfile并将以下代码放入其中：

Setting up a grunt task needs fetching of the plugin by the registry and loading the plugin package, which contains the task through the method, so you can configure and execute them.

设置grunt任务需要通过注册表获取插件并加载plugin包，该包包含通过方法包含的任务，因此您可以配置和执行它们。

The previous task configuration will compile each Jade file individually and place the results in the build directory with a single file.

先前的任务配置将分别编译每个Jade文件，并将结果与单个文件一起放置在build目录中。

设置Grunt Watch任务 (Setting up the Grunt Watch Task)

The Watch task is one of the most useful plugins. This will watch your changes, rebuild and proceed immediately automatically without the need to run the task each time we make a change.

Watch任务是最有用的插件之一。 这将监视您的更改，立即重建并自动进行，而无需每次执行更改时都运行任务。

To add the watch task, install the plugin using this command:

要添加监视任务，请使用以下命令安装插件：

Then add its configuration to :

然后将其配置添加到 ：

This will create a “watch” task for Jade files and the Grunt file. To complete this, you’ll also need to load the Grunt task and register the task:

这将为Jade文件和Grunt文件创建一个“监视”任务。 要完成此操作，您还需要加载Grunt任务并注册该任务：

Now when you run the command it will accomplish the following tasks:

现在，当您运行命令时，它将完成以下任务：

1. Compile Jade

   编译玉

2. Run the task to watch the changes on the Jade files and automatically re-compile them once they’ve changed.

   运行任务以监视Jade文件上的更改，并在更改后自动重新编译它们。

The process will be active until it’s killed by CTRL+C

该进程将一直处于活动状态，直到被CTRL + C杀死为止

NOTE: The command is a shortcut/alias for . It defines what tasks to be executed – and in our case – when we run the command.

注意： 命令是的快捷方式/别名。 它定义了当我们运行命令时要执行的任务–在我们的情况下是和 。

脚手架gruntfile.js生成器 (Scaffold gruntfile.js generator)

You can use the scaffolding command for creating a basic Gruntfile. We will not need all its default tasks in this tutorial, so we won’t use it.

您可以使用脚手架命令来创建基本的Gruntfile。 在本教程中，我们不需要其所有默认任务，因此我们将不使用它。

项目结构 (Project Structure)

We’ll create our source folder hierarchy as follows:

我们将如下创建源文件夹层次结构：

Execute the command and the following structure will be created for you.

执行命令，将为您创建以下结构。

一个简单的玉器例子 (A Simple Jade Example)

Jade is indentation and whitespace based, as each level of indentation creates a level of nesting elements in HTML. For illustration, the following code shows how the basic structure might look using Jade for producing an HTML document.

Jade是基于缩进和空格的 ，因为每个缩进级别都会在HTML中创建一个嵌套元素级别。 为了说明起见，以下代码显示了使用Jade生成HTML文档时基本结构的外观。

Which compiles into:

编译成：