原文：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. 【LeetCode OJ】Validate Binary Search Tree

    Problem Link: https://oj.leetcode.com/problems/validate-binary-search-tree/ We inorder-traverse the ...

  2. EasyUI中Grid标题居中方法（jquery实现方法）

    $(".panel-title").css("text-align", "center"); 一句话搞定,就是这么随意

  3. mysql查询语句中用户变量的使用

    先上代码吧 SELECT `notice`.`id` , `notice`.`fid` , `notice`.`has_read` , `notice`.`notice_time` , `notice ...

  4. jquery操作input值总结

    获取选中的值获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val(); 获取select被选中项的文本var item = $ ...

  5. STM32中的PWM的频率和占空比的设置

    转于http://blog.csdn.net/liming0931/article/details/8491468 下面的这个是stm32的定时器逻辑图,上来有助于理解:   TIM3的ARR寄存器和 ...

  6. Linux下select&poll&epoll的实现原理（一）

    最近简单看了一把 linux-3.10.25 kernel中select/poll/epoll这个几个IO事件检测API的实现.此处做一些记录.其基本的原理是相同的,流程如下 先依次调用fd对应的st ...

  7. Python selenium执行多个测试脚本时，浏览器多次打开登录账户

    当类里面定义了 setUp() 方法的时候,测试程序会在执行每条测试项前先调用此方法:同样地,在全部测试项执行完毕后,tearDown() 方法也会被调用. 所以当在setUp()中执行打开浏览器后, ...

  8. http权威指南

    我的plan :one day two hour,one week done!!!争取不超过2周看完

  9. iPhone应用开发 UITableView学习点滴详解

    iPhone应用开发 UITableView学习点滴详解是本文要介绍的内容,内容不多,主要是以代码实现UITableView的学习点滴,我们来看内容. -.建立 UITableView DataTab ...

  10. [NOIP2011] 聪明的质检员（二分答案）

    题目描述 小T 是一名质量监督员,最近负责检验一批矿产的质量.这批矿产共有 n 个矿石,从 1到n 逐一编号,每个矿石都有自己的重量 wi 以及价值vi .检验矿产的流程是: 1 .给定m 个区间[L ...