gulp3实战技巧之利用gulp-file-include实现模板复用，大大提高开发效率！
阅: - 评:0 - 积分:0
摘要：去年今日，艺灵写了最后一篇关于gulp的实战文章。最近刚好因项目原因，又拾起gulp练手了一把。虽然开发过程中没什么大的问题，毕竟之前是有保存配置环境的。但本着分享精神，艺灵觉得还是有必要继续再写一些关于gulp方面的实战文章。话说，gulp官网已经默认推荐gulp4了，后续艺灵可能写一些用gulp4开发传统项目的连载笔记......
这是本站关于gulp3实战技巧的第15篇文章，gulp4同样适用，只需微做调整即可。
一、断更1年，继续更新
时间过的挺快的，上一篇关于gulp的文章是去年今日写的：《一篇文章带你解读传统网页开发和gulp+webpack自动化构建工具开发的优劣》。唉......
正好最近艺灵又搞了个传统的网页项目，所以又拾起了gulp。别扯Vue、Angular、React三大框架和Webpack那些高大上的前沿技术。毕竟是开发传统项目，我还是选择gulp！[:偷笑]
二、如果在html中可以像php一样使用模板化复用，那该有多好啊！
2.1、现状
曾几何时，艺灵我厌倦了传统网页的开发！枯燥、繁琐、浪费时间！当文件越多，若使用了大量的相同模板，此时修改起来就越痛苦！比如：导航要修改、页尾要修改、某个卡片版块儿......
通常情况下，一个网页的头部、导航、页尾是固定不变的。不管在一些成熟的后台管理系统中还是在淘宝店铺装修中，基本上都会提供一个全局的头部、导航、页尾区域供编辑。这在php中是很好实现的，直接一个include 'header.php'就搞定了。但在html中，实现起来极其困难。这里不钻牛角尖，虽然iframe可以做到，但开发前台页面使用iframe未免太过分了！ajax也能做到，但总是显得那么鸡肋。
2.2、使用gulp-file-include，迎接光明
因为是使用gulp开发，所以很多插件都有限制。这里介绍的是艺灵之前一直使用的gulp-file-include，戳我访问文档。
光看名字就能猜出个一二来，确实如此。使用gulp-file-include后，我们就可以在html页面中像php那样愉快的引用定义好的模板文件了。[:开心]
三、牛刀小试
3.1、环境搭建
假设看官的电脑中已经安装了node.js环境，此时直接在任意盘符中创建一个目录即可。此处以I盘为例。进入I盘后创建一个名为demo-gulp-file-include的文件夹，windows电脑中按下win + R会在左下角看到一个运行的弹窗，
接着输入cmd会按回车或点击“确定”，此时已进入命令行。然后再依次输入以下命令：cd I:\demo-gulp-file-include后回车，再输入I:并回车（进入文件夹）npm install gulp@3.9.1 --save-dev在项目目录下安装gulp3 npm init创建项目描述文件package.json一路回车即可npm install gulp-file-include --save-dev安装gulp-file-include插件。
此时，我们的项目环境及本篇文章中要用到的插件就已经全部安装完毕了。流程图：在cmd中执行一波命令创建项目环境.png
3.2、新建页面及目录
为了更加真实的模拟项目，此处我们还需要新建一些页面和必要的目录。大致如下：
- demo-gulp-file-include /* 目录 */
- node_modules /* 项目中的node包（由上面的命令自动生成） */
- gulpfile.js /* gulp配置文件 */
- package.json /* npm init命令创建的配置文件（由上面的命令自动生成） */
- package-lock.json（由上面的命令自动生成）
- assets /* 开发目录 */
- index.html /* 首页 */
- list.html /* 列表页 */
- about.html /* 关于我们页面 */
- js /* js文件目录 */
- xxx.js /* 若干js文件 */
- css /* css样式表目录 */
- xxx.css /* 若干css样式表 */
- images /* 图片目录 */
- tem /* 模板目录 */
- head.tpl /* 页头模板（meta、css、js） */
- nav.tpl /* 导航模板 */
- footer.tpl /* 页尾模板 */
- dist /* 打包后的目录（自动生成） */
3.3、手动配置gulpfile.js
接下来，我们还要手动配置一个gulpfile.js文件。大致内容如下：
- /* @Description: gulp3的配置文件 */
- var gulp = require('gulp');
- var gulpFileInclude = require('gulp-file-include'); /* 实现模板复用 */
- var base = './assets';
- var dist = './dist';
- var path = {
- assets: {
- css: base + '/css/*.css',
- js: base + '/js/*.js',
- html: base + '/*.html',
- tem: base + '/tem/**'
- },
- dist: {
- css: dist + '/css',
- js: dist + '/js'
- }
- };
- /* css任务 */
- gulp.task('css', function () {
- return gulp.src(path.assets.css).pipe(gulp.dest(path.dist.css))
- });
- /* js任务 */
- gulp.task('js', function () {
- return gulp.src(path.assets.js).pipe(gulp.dest(path.dist.js))
- });
- /* html任务 */
- gulp.task('html', function () {
- var options = {
- basepath: base + '/tem/' /* 模板路径 */
- };
- return gulp.src(path.assets.html).pipe(gulpFileInclude(options)).pipe(gulp.dest(dist))
- });
- /* 监听 */
- gulp.task('watch', function () {
- gulp.watch(path.assets.css, ['css']); /* css有修改时监听 */
- gulp.watch(path.assets.js, ['js']); /* js有修改时监听 */
- gulp.watch([path.assets.html, path.assets.tem], ['html']); /* html有修改时监听 */
- });
- /* 默认任务，启动后会执行一次 */
- gulp.task('default', ['html', 'css', 'js', 'watch']);
注意上面代码中黄色高亮的watch，如果去掉了，每次修改文件后要手动执行gulp才能生成最新的文件！
3.4、简写html页面
准备工作已经差不多了，现在我们来愉快的写页面吧。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>首页 - 实现模板复用，提高开发效率</title>
- <meta name="keywords" content="" />
- <meta name="description" content="" />
- <!-- 头部内容模板（meta、css、js等） start -->
- @@include("head.tpl")
- <!-- 头部内容模板 end -->
- </head>
- <body>
- <!-- 导航模板 start -->
- @@include("nav.tpl")
- <!-- 导航模板 end -->
- <!-- 内容区 start -->
- <div class="content">
- 内容区（内容省略）
- </div>
- <!-- 内容区 end -->
- <!-- 页尾模板 start -->
- @@include("footer.tpl")
- <!-- 页尾模板 end -->
- </body>
- </html>
3.5、运行gulp
上面./assets/index.html页面中的include写法略像php，到底能不能运行还需要执行后才知道结果。
此时切换到cmd窗口，然后输入：gulp并回车。此时会自动生成一个dist目录，进去后会看到index.html文件，双击运行可以看到已经成功了。如图：在cmd中运行gulp后自动创建dist目录并生成相关页面.png
3.6、多页面复用模板
刚才./assets/index.html页面已经成功了，下面把list.html和about.html也改掉。为了让tem中的模板体现出更多的价值，我们来修改nav.tpl模板文件吧。
- <div class="nav">这是导航模块（公用）</div>
- <ul>
- <li><a href="./index.html">首页</a></li>
- <li><a href="./list.html">列表页</a></li>
- </ul>
此时再手动刷新刚才的index.html页面会看到出现了刚添加的“首页”、“列表页”字样。点击导航可跳转到对应的页面，我们刚修改的模板在其他页面也已经同步生效了，是不是很开心？！如图：修改nav模板文件后所有页面都生效了.gif
现在就算是有需求：要在导航中添加一个详情页的超链接，我们只需要修改tem/nav.tpl文件即可。如果我们用以往的方式开发，项目中有10个页面就得分别修改这10个页面。只改一次还好，但实事上项目需求大概率存在多变的情况。所以，让html拥有模板化复用能力，在开发中是件非常高效的事情！
四、demo源码
demo源码已上传到了github上，如果看官需要研究源码，可以点击下面的链接进行访问并下载。
五、运行gulp后报错ReferenceError: primordials is not defined ？
可能有些看官在下载demo源码后在本地跑失败了，报错信息为：ReferenceError: primordials is not defined。
如果看官有幸看到此段代码，那就要恭喜看官中奖了！报错原因是：gulp 和 node 版本不兼容 。
5.1、两种解决方案
在说解决方案前，我们需要先搞清楚项目中的gulp和node分别是什么版本。这里有两种搭配套餐：
套餐一（gulp3）：gulp@3 + node@11以下，例如：gulp@3.9.1+node@11.15.0；
套餐二（gulp4）：gulp@4 + node@12，例如：gulp@4.0.2+node@12.14.0。
5.2、gnvm管理node版本
关于gulp的升级降级比较方便，但node就麻烦一些。特别是现在的前端项目，基本都是Vue、Angular、React三大框架和Webpack的天下。冒然升降node可能会影响电脑中其他项目的运行，这里可以安装gnvm来管理电脑中的node。安装过程也非常简单，只需要四步：
第一步：根据自己电脑系统情况下载gnvm.exe；
第二步：把gnvm.exe放到node.js文件夹中；
第三步：在cmd中输入gnvm version即可。
第四步：在cmd中输入gnvm install node的版本号并回车即可安装指定的node；
详细步骤参见官方教程：http://ksria.com/gnvm/
5.3、gnvm常用命令
当看官安装完gnvm后，平时用到最多的命令要属gnvm ls和gnvm use了。比如：在命令行中输入gnvm ls回车后可以看到电脑安装有哪些node；再输入gnvm use 版本号并回车即可使用指定版本的node。如图：gnvm管理多个node版本.png
现在，我们就可以根据项目中gulp的版本来切换对应的node了。
六、最后
本文只是简单的介绍了如何在传统项目中通过模板复用来提高开发效率，其实gulp-file-include还可以动态传值。在下一篇文章中，艺灵会详细介绍在开发中常见的几种写法。例如：for循环、if条件判断等。
转载声明：
若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2020-05-19/gulp-file-include.html若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。
亲，扫个码支持一下艺灵呗~
Tag: gulp教程 gulp3 gulp4 web前端开发 自动化构建 gulp-file-include php gulpfile.js node gnvm vue
上一篇: 微信小程序从入坑到放弃二十八：开发一款DIY音乐播放器(WXS优化版) 下一篇: gulp实战技巧之日常开发定位样式难？不如试试神器gulp-sourcemaps吧！