npm 包 gulp-jade-inheritance 使用教程

前言

在前端开发中，我们经常需要使用一些工具来提高开发效率。而其中一个著名的工具就是 Gulp，它可以方便地帮助我们完成前端自动化任务。而对于 Gulp 来说，npm 上也有很多的插件能够满足我们的需求，而 gulp-jade-inheritance 就是其中之一。在这篇文章中，我们将详细讲解 gulp-jade-inheritance 的使用方法和意义，帮助读者更好地使用该 npm 包。

gulp-jade-inheritance 是什么？

gulp-jade-inheritance 是一个用于 gulp 的 jade 模板继承插件。它可以帮助我们实现模板的复用和模板间的继承。它基于 gulp 和 jade，可以方便地集成在 Gulp 的自动化构建过程中。同时，这个插件还具有一些特殊的功能，如忽略某些 jade 文件，自动识别更新的 jade 文件等，会进一步提高我们的前端开发效率。

安装

在使用 gulp-jade-inheritance 之前，我们需要先通过 npm 安装它。

npm install gulp-jade-inheritance --save-dev

使用方法

接下来我们将详细讲解 gulp-jade-inheritance 的使用方法。我们先来看一下简单的使用示例。

-- -------------------- ---- -------
--- --------------- - ---------------------------------
--- ---- - ---------------------
--- ---- - ----------------

----------------- -------- -- -
    ----------------------
        ------------------------------- --------
        -------------
        ------------------------
---

以上代码表示，我们使用 gulp.jadeInheritance 来检测 src 目录下的所有 .jade 文件，然后构建这些文件。其中，basedir 表示 jade 文件的根目录。如果有继承关系，被依赖的文件会被解析并自动合并在一起。

接下来，我们详细介绍一下 gulp-jade-inheritance 的使用方法。

使用 gulp-jade-inheritance

首先，在 gulpfile.js 中引入 gulp 和 gulp-jade-inheritance，如下所示：

var gulp = require('gulp');
var jadeInheritance = require('gulp-jade-inheritance');

其次，设置 gulp 的任务方法，并在其中使用 gulp-jade-inheritance。举个例子：

gulp.task('jade', function () {
    gulp.src('src/**/*.jade')
        .pipe(jadeInheritance({basedir: 'src'}))
        .pipe(jade())
        .pipe(gulp.dest('dist'));
});

在这个例子中，我们设置了一个 jade 的任务，并在任务中使用了 gulp-jade-inheritance 来检测 src 目录下的所有 .jade 文件。同时，我们可以看到，我们使用了双星号来查找所有目录下的 jade 文件，以方便地管理它们。

另外，我们还需在任务中调用 gulp-jade，来执行编译操作。

最后，我们将编译好的文件存放在 dist 文件夹下。

这样，我们就可以使用 gulp-jade-inheritance 来进行有序的 jade 文件编译了。

配置选项

在使用 gulp-jade-inheritance 的时候，我们还可以设置一些选项，以便更好地适应我们的开发需求。

basedir

• 描述：表示 jade 文件的根目录，用于解析文件所在的绝对路径或起始路径。
• 默认值：null
• 类型：string

gulp.task('jade', function () {
    gulp.src('src/**/*.jade')
        .pipe(jadeInheritance({basedir: 'src'}))
        .pipe(jade())
        .pipe(gulp.dest('dist'));
});

extension

• 描述：用于指定文件的拓展名。
• 默认值：'.jade'
• 类型：string

gulp.task('jade', function () {
    gulp.src('src/**/*.jade')
        .pipe(jadeInheritance({basedir: 'src', extension: '.tpl.jade'}))
        .pipe(jade())
        .pipe(gulp.dest('dist'));
});

skip

• 描述：设置需要被跳过的文件。
• 默认值：空对象
• 类型：object

gulp.task('jade', function () {
    gulp.src('src/**/*.jade')
        .pipe(jadeInheritance({basedir: 'src', skip: 'header.jade'}))
        .pipe(jade())
        .pipe(gulp.dest('dist'));
});

ignoreExtension

• 描述：设置需要被忽略的文件扩展名。
• 默认值：null
• 类型：string

gulp.task('jade', function () {
    gulp.src('src/**/*.jade')
        .pipe(jadeInheritance({basedir: 'src', ignoreExtension: 'jade'}))
        .pipe(jade())
        .pipe(gulp.dest('dist'));
});

处理过程

在使用 gulp-jade-inheritance 进行文件编译的过程中，需要注意以下处理流程。

1. 在获取到链式依赖关系中的文件之后，将会在其中最近的一个文件中查找数据，然后将这些数据进行合并。
2. 如果文件不存在或出现错误，将会自动跳过该文件。
3. 如果忽略了某些文件，将会在 gulp-jade-inheritance 的控制台中输出一个警告信息。

结束语

在这篇文章中，我们详细介绍了 npm 包 gulp-jade-inheritance 的使用方法和意义，帮助读者更好地掌握这个工具并且可以高效的在项目中应用它。这个工具可以极大的提高我们前端开发的效率，值得一试！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb402b5cbfe1ea0611216