【gulp】002.gulp实现页面复用，导航栏样式激活

最新推荐文章于 2025-05-22 12:47:44 发布

马卡龙MK

最新推荐文章于 2025-05-22 12:47:44 发布

阅读量248

点赞数

分类专栏：前端文章标签： gulp html node.js javascript

本文链接：https://blog.youkuaiyun.com/Montaro2017/article/details/107539002

版权

前端专栏收录该内容

4 篇文章

订阅专栏

系列文章

【gulp】001.使用gulp自动构建前端页面实现页面复用
 【gulp】002.gulp实现页面复用，导航栏样式激活
 【gulp】003.编译less 使用autoprefixer增加前缀使用babel转换生成sourcemap
设定src下includes目录为被引入文件

注册任务

gulp.task("include", () => {
  //传入的文件，可使用通配符
  return gulp.src("src/**/*.html")
  	//交给gulp-fil-include操作
    .pipe(fileinclude({
      prefix: "@@",//include前缀
      basepath: "@file"//可查看官网文档
    }))
    //dest 输出到目录
    .pipe(gulp.dest("dist/"))
})

在src目录下创建inde.html，创建includes文件夹，includes目录下创建nav.html
index.html:引入includes中的nav

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  @@include("includes/nav.html")
</body>
</html>

nav.html

<ul>
  <li>Index</li>
  <li>Home</li>
  <li>About</li>
</ul>

执行gulp include命令
会发现目录下出现了一个dist文件夹，其中包含了index.html和includes目录
查看构建的dist下的index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul>
  <li>Index</li>
  <li>Home</li>
  <li>About</li>
</ul>
</body>
</html>

能看到nav.html文件中的内容合并到了index.html中

排除文件

能够发现，构建出的文件包含了includes目录，这显然是我们不太愿意看到的。
在此之前，需要先明白为什么includes目录也被输出到dist目录中：

 gulp.src("src/**/*.html")

这里我们使用了src/**/*.html来匹配src目录下所有的html文件，因此也将includes包含进去了，为了不将includes包含进去，有两种做法，一种是修改includes文件的后缀，一种是排除includes目录。
先把dist目录删除
方法一记得修改@@include中的文件名。
方法二即是在src中添加参数排除includes目录
在路径前加入!即是排除此文件

gulp.src(["src/**/*.html","!src/includes/**"])

重要的一点目录规则

很多人搞不清楚为什么构建后的目录少了文件夹，这里我们做个简单对比
现在项目结构为：

gulp-project
|   1.txt
|   gulpfile.js
|   package-lock.json
|   package.json
|           
\---src
    |   about.html
    |   home.html
    |   index.html
    |   
    +---css
    |       index.less
    |       
    +---includes
    |       nav.html
    |       
    \---js
        |   index.js
        |
        +---aaa
        |      aaa.js

代码一：

gulp.task("js1", () => {
  return gulp.src("src/js/**")
    .pipe(gulp.dest("dist/"))
})

执行后的结果

dist
|   index.js
|
\---aaa
    |   aaa.js

发现src目录中下js中的文件跑到dist下了

代码二

gulp.task("js2", () => {
  return gulp.src("src/**/*.js")
    .pipe(gulp.dest("dist/"))
})


dist
|
\---js
    |   index.js
    |
    \---aaa
        |   aaa.js

代码一与代码二不同之处在于传入的路径不同
代码一是js目录下所有文件
代码二是src目录下所有js文件
gulp会将自通配符*之前的路径改为dist
解决这类问题的方法，第一种就是使用src/**这样的字符串，但是
第二种办法，就是在src中加入参数

gulp.task("js1", () => {
  return gulp.src("src/js/**", {
      base: "src"
    })
    .pipe(gulp.dest("dist/"))
})

需要根据不同情况去使用

传递参数添加样式

在include文件时，可以为其添加参数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    li.active {
      color: #ff6600;
    }
  </style>
</head>
<body>
  @@include("includes/nav.html",{active:"index"})
</body>
</html>

在nav.html中接受参数并判断

<ul>
  <li @@if(context.active==="index"){class="active"}>Index</li>
  <li @@if(context.active==="home"){class="active"}>Home</li>
  <li @@if(context.active==="about"){class="active"}>About</li>
</ul>

模仿index.html创建home和about文件，使用不同参数引入nav.html，内容省略。
在这里插入图片描述

about.html
查看构建生成的文件，发现加上了对应的class

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    li.active {
      color: #ff6600;
    }
  </style>
</head>

<body>
  <ul>
  <li >Index</li>
  <li >Home</li>
  <li class="active">About</li>
</ul>
</body>

</html>