爱站程序员基地系列文章
【gulp】001.使用gulp自动构建前端页面实现页面复用
【gulp】002.gulp实现页面复用，导航栏样式激活
【gulp】003.编译less 使用autoprefixer增加前缀 使用babel转换 生成sourcemap
设定src下includes目录为被引入文件
注册任务
gulp.task(\"include\", () => {//传入的文件，可使用通配符returngulp.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，内容省略。
查看构建生成的文件，发现加上了对应的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>
