HTML 代码复用实践 (静态页面公共部分提取复用)

本文介绍了一种利用gulp-file-include进行HTML代码复用的方法,包括文件目录组织、gulpfile.js配置过程及解决中文乱码问题的具体步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

    原文: HTML 代码复用实践

   上面的链接里面安装配置步骤已经非常详细,这里主要记录我操作过程中遇到的几个问题

    gulp-file-include 的使用

    按上面的步骤安装之后,node_modules下会有gulp和gulp-file-include

   

    还有一个我们创建的空的gulp-file-include文件

  

 

在gulp-file-include中组织文件目录(把下载的gulp、gulp-file-include加进来)

 

配置gulpfile.js(gulp、gulp-file-include和gulpfile.js同一级目录下)

 

src下的include文件夹放公共部分的html(或者说放模板),模板里面没有html、head、title、body标记

 

公共页面被引入之后出现中文乱码的问题

 

 

运行文件之后,在dist文件中会生成编译之后的文件

要修改文件的时候,修改src里面的原文件,然后再重新运行一遍,重新生成新文件

 

转载于:https://www.cnblogs.com/yy95/p/6050051.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值