原文：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里面的原文件，然后再重新运行一遍，重新生成新文件

HTML 代码复用实践 （静态页面公共部分提取复用）的更多相关文章

  1. HTML 代码复用实践

    前言 通常我们所做的一些页面,我们可以从设计图里面看出有一些地方是相同的.例如:头部,底部,侧边栏等等.如果是制作静态页面的同学,对于这些重复的部分只能够通过复制粘贴到新的页面来,如果页面的数量上去了 ...

  2. PHP代码为什么不能直接保存HTML文件——>PHP生成静态页面教程

    1.server会依据文件的后缀名去进行解析,假设是HTML文件则server不会进行语法解析.而是直接输出到浏览器. 2.假设一个页面中所有都是HTML代码而没有须要解析的PHP语法,则没有必要保存 ...

  3. 静态页面如何实现 include 引入公用代码

    一直以来,我司的前端都是用 php 的 include 函数来实现引入 header .footer 这些公用代码的,就像下面这样: <!-- index.php --> <!DOC ...

  4. PHP代码为什么不能直接保存HTML文件——>PHP生成静态页面教程

    1.服务器会根据文件的后缀名去进行解析,如果是HTML文件则服务器不会进行语法解析,而是直接输出到浏览器. 2.如果一个页面中全部都是HTML代码而没有需要解析的PHP语法,则没有必要保存为PHP文件 ...

  5. velocity生成静态页面代码

    首先需要必备的jar包: web.xml <!-- load velocity property --> <servlet> <servlet-name>veloc ...

  6. 美团外卖Android平台化的复用实践

    美团外卖平台化复用主要是指多端代码复用,正如美团外卖iOS多端复用的推动.支撑与思考文章所述,多端包含有两层意思:其一是相同业务的多入口,指美团外卖业务需要在美团外卖App(下文简称外卖App)和美团 ...

  7. 浅谈php生成静态页面

    一.引 言 在速度上,静态页面要比动态页面的比方php快很多,这是毫无疑问的,但是由于静态页面的灵活性较差,如果不借助数据库或其他的设备保存相关信息的话,整体的管理上比较繁琐,比方修改编辑.比方阅读权 ...

  8. 比较详细PHP生成静态页面教程

    一,PHP脚本与动态页面. PHP脚本是一种服务器端脚本程序,可通过嵌入等方法与HTML文件混合, 也可以类,函数封装等形式,以模板的方式对用户请求进行处理.无论以何种方式,它的基本原理是这样的.由客 ...

  9. 敏捷开发中高质量 Java 代码开发实践

    Java 项目开发过程中,由于开发人员的经验.代码风格各不相同,以及缺乏统一的标准和管理流程,往往导致整个项目的代码质量较差,难于维护,需要较大的测试投入 和周期等问题. 这些问题在一个项目组初建.需 ...

随机推荐

  1. REVERSE-极客大挑战-geek2.apk

    嗯 一道apk的题目,题目本身并不是很难,但是我用的python却坑了我小半天...不过在纠错的过程中我也学到了不少东西 链接:http://pan.baidu.com/s/1i5LkJDr  密码: ...

  2. 传入的表格格式数据流(TDS)远程过程调用(RPC)协议流不正确。此 RPC 请求中提供了过多的参数。最多应为 2100

    出现这个问题的背景是,判断一批激活码在系统中是否已经存在,很傻的一个作法是,把这一批激活码,以in(in (‘ddd‘,‘aaa‘))的形式来处理,导致问题的出现. 后来,查找资料,http://bb ...

  3. Javascript 事件对象进阶（一）拖拽的原理

    拖拽原理 鼠标和Div的相对距离不变 三大事件 把拖拽加到document上 拖拽简单点来说就是不停的更改物体到页面左边&顶部的距离! 那么如何计算出物体到页面左端的距离呢? 当鼠标按下的时候 ...

  4. capwap DTSL 加密分析

    1.概述 DTLS即Datagram Transport Layer Security (RFC4347),AP加入AC前,先进行DTLS验证,当AP与AC之间的DTLS握手成功后,AP发出Join请 ...

  5. css技巧收集

    1. 使用 :not() 为导航添加/取消边框 传统的方法为导航栏添加边框: /* add border */ .nav li { border-right: 1px solid #666; } /* ...

  6. FreeBSD 配置

    FreeBSD 配置 1. FreeBSD源代码下载站点:

  7. Swiper 中文API手册（share）

    本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html ---------------------------华丽的分割线------------ ...

  8. HTML 列表详解

    1.有序列表    有序列表是编号列表,用于对网页中的某些内容进行编号排列,以便使读者清晰地了解每行的顺序.在HTML中插入有序列表是通过<ol>和<li>标签来实现的.首标签 ...

  9. eclipse Run On Server 异常：could not load the Tomcat Server configuration at Servers\tomcat V5.0 Sertomcat

    eclipse Run On Server 异常:could not load the Tomcat Server configuration at Servers\tomcat V5.0 Serto ...

  10. 特别实用而且功能强大的attributedText属性

    UILabel *sendNameLB = [[UILabel alloc]initWithFrame:CGRectMake(, , , )]; NSString * string = @" ...