如何使用 gulp-include 插件

【问题标题】：How to use gulp-include plugin如何使用 gulp-include 插件
【发布时间】：2017-03-02 18:57:54
【问题描述】：

我有一个项目，我使用 gulp 作为构建工具。我想要的是因为我有 2 个具有不同内容的相同页面，在其中包含页眉、页脚和导航栏 html 文件。我的文件夹主 index.html 位于根文件夹项目中，并且我还有带有页眉、页脚和导航栏的文件夹部分。如何设置 gulp include 以便我可以使用这样的东西：

<!DOCTYPE html>
<html lang="en">

  /*=include partials/header.html */

  <body>

    /*=include partials/navbar.html */

    <div class="container form-container">
      <div class="row">

【问题讨论】：

标签： javascript gulp

【解决方案1】：

来自gulp-include documentation 将此添加到您的html

<!--=include partials/header.html -->

像这样

<!DOCTYPE html>
<html lang="en">

    <!--=include partials/header.html -->

<body>

    <!--=include partials/navbar.html -->

    <div class="container form-container">
      <div class="row">

我假设你的 header.html 和 navbar.html 只有这些元素，即没有正文标签，然后你的 gulp 文件很简单：

var gulp  = require("gulp"),
include   = require("gulp-include");

gulp.task("include html", function() {
  console.log("-- gulp is including html partials");

  gulp.src("index.html")
    .pipe(include()).on('error', console.log)
    .pipe(gulp.dest("dist"));
});

【讨论】：