原文：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. java开发命名规范

    使用前注意事项: 1.  由于Java面向对象编程的特性, 在命名时应尽量选择名词 2.  驼峰命名法(Camel-Case): 当变量名或函式名是由一个或多个单字连结在一起,而构成的唯一识别字时,首 ...

  2. DIV+CSS布局网站基本框架

    html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  3. wamp出现You don’t have permission to access/on this server提示的解决方法

    本地搭建wamp 输入http://127.0.0.1访问正常,当输入http://localhost/ apache出现You don't have permission to access/on ...

  4. Maven项目pom.xml文件详解

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  5. [转] 使用 MYSQLBINLOG 来恢复数据

     使用 MYSQLBINLOG 来恢复数据 2009-04-05 12:47:05 标签:mysql mysqlbinlog 恢复 数据库 数据 原创作品,允许转载,转载时请务必以超链接形式标明文章 ...

  6. win7系统下的FTP配置

    2016-07-12 工作中需要在win7操作系统下配置FTP,遇到许多问题,所以记录下来方便以后解决问题. FTP是文件传输协议的简称.用于Internet上的控制文件的双向传输.同时,它也是一个应 ...

  7. 最全的CSS浏览器兼容问题

    CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格 ...

  8. 使用 itext、flying-saucer 实现html转PDF（转）

    转自 http://blog.csdn.net/mhouwei62/article/details/51394804 表示感谢 itext-2.1.7高于此版本已经更新为AGPL授权,不建议使用. 添 ...

  9. ［ADB］ADB(Android Debug Bridge)简介及基础（不包含命令）

    "Android Debug Bridge (adb) is a versatile command line tool that lets you communicate with an ...

  10. dede 优化打开速度

    织梦DedeCMS本地后台运行速度慢 不知道从什么时候开始,织梦DedeCMS在本地PHP环境进行测试的时候,后台的运行反应会非常的慢,经常过了很久都没有反应.运行很久之后,还会出现了“\includ ...