简介
如果你是一名前端开发者，那么你一定听说过gulp和jade。gulp是一款基于流的自动化构建工具，而jade则是一款高效简洁的模板引擎。在前端开发中，我们经常需要使用jade来编写html模板，而gulp则会将jade编译成html文件。这正是gulp-jade这个npm包的作用。
gulp-jade是一个基于gulp的jade编译插件，它能够轻松地将jade代码转换为html格式，并且拥有丰富的配置选项，使得我们能够更加自定义化地生成需要的html文件。
安装
首先，我们需要全局安装gulp。在命令行输入以下命令：
npm install -g gulp
接下来，我们就可以在项目中安装gulp-jade。在项目根目录下输入以下命令：
npm install --save-dev gulp-jade
使用方法
基础用法
在使用gulp-jade之前，我们需要先配置一个gulpfile.js文件。在项目根目录下创建一个gulpfile.js文件，然后引入gulp和gulp-jade模块：
var gulp = require('gulp');
var jade = require('gulp-jade');接着，我们可以使用gulp.task()方法定义一个任务，在任务中使用gulp.src()方法指定要编译的jade文件，然后使用gulp.dest()方法指定生成的html文件的目录，并使用gulp-jade的管道方法完成编译过程。
gulp.task('jade', function() {
return gulp.src('views/*.jade')
.pipe(jade())
.pipe(gulp.dest('dist/'));
});在命令行中运行下面的命令，就可以执行jade任务：
gulp jade
执行完该命令之后，views目录下的所有.jade文件将会被编译成.html文件，并输出到dist目录下。
配置选项
gulp-jade提供了各种配置选项，以便我们更加自定义化地生成需要的html文件。以下是一些常用的配置选项：
- pretty：
Boolean类型，默认值为false。如果设置为true，则会生成美化过的html文件。 - data：
Object类型，默认值为undefined。可以通过该选项向模板中传递数据。 - basedir：
String类型，默认值为当前工作目录。可以指定jade模板文件查找的基本目录。 - doctype：
String类型，默认值为HTML5的文档类型。可以指定生成html文件的文档类型。
我们可以在gulp-jade的方法中选用这些选项。例如，在上面的基础用法中添加pretty选项：
gulp.task('jade', function() {
return gulp.src('views/*.jade')
.pipe(jade({ pretty: true }))
.pipe(gulp.dest('dist/'));
});当我们执行gulp jade命令时，生成的html文件将会被美化。
使用数据
在大部分情况下，我们都需要向jade模板中传递数据。最常见的数据传递方式是使用JSON类型的数据。我们可以将数据以json格式存储在一个.json文件中，然后使用gulp-data子模块引入该文件。
以下是一个示例：
在data.json文件中存储以下数据：
{
"title": "gulp-jade demo",
"content": "Hello, world!"
}在gulpfile.js文件中引入gulp-data：
var data = require('gulp-data');然后在定义jade任务时使用gulp-data管道方法引入该文件：
gulp.task('jade', function() {
return gulp.src('views/*.jade')
.pipe(data(function(file) {
return require('./data.json');
}))
.pipe(jade())
.pipe(gulp.dest('dist/'));
});在该示例中，我们使用gulp-data的data()方法将data.json文件引入，并将该文件中的数据添加到模板中。在模板中我们可以使用该数据，例如：
doctype html
html(lang="en")
head
title #{title}
body
h1 #{content}在执行gulp jade之后，生成的html文件将会包含title和content数据。
总结
在本篇文章中，我们介绍了npm包gulp-jade的使用教程，包括基本用法、配置选项以及使用数据。gulp-jade是一款实用的自动化工具，可以极大地提高我们的工作效率，尤其在需要频繁编写html模板时更是不可或缺的工具。希望该教程能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/71148