原文：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. mysql启动，关闭，重启

    1)启动: ? 1 sudo /etc/init.d/mysql start 2)停止: ? 1 sudo /etc/init.d/mysql stop 3)重启: ? 1 sudo /etc/ini ...

  2. Maven项目下java.lang.ClassNotFoundException的解决方法

    问题背景: Maven的project下,项目中已经引用了相应的jar包.Java class中没有语法错误,在执行时报ClassNotFound.检查了Maven的pom.xml,依赖引入正常. 错 ...

  3. CTE

    Why use CTE: Improve code readability Breaking up complex queries into smaller blocks Execution Scop ...

  4. nodejs入门 SSH服务器远程部署nodejs

    最近刚刚接了一个项目我也是个nodejs的初级的人 从开始吧 建立服务器  用什么ssh工具我就不说了 这个界面大家都熟悉吧 点击下面的 All download options wget http: ...

  5. 驱动实现led,pwm和中断基础知识

    2015.4.8星期三 晴天 今天老师讲的内容是内核编写led和pwm驱动,实现花样灯和放歌的功能.理解应用和驱动的对接,最后自己实现了在放歌的时候根据歌曲的节奏亮灭一个小灯,应为两个独立的驱动都已经 ...

  6. DOM事件简介－－摘自admin10000

    Click.touch.load.drag.change.input.error.risize — 这些都是冗长的DOM(文档对象模型)事件列表的一部分.事件可以在文档(Document)结构的任何部 ...

  7. codeforces 723E （欧拉回路）

    Problem One-Way Reform 题目大意 给一张n个点,m条边的无向图,要求给每条边定一个方向,使得最多的点入度等于出度,要求输出方案. 解题分析 最多点的数量就是入度为偶数的点. 将入 ...

  8. linux学习笔记2-linux的常用命令

    第一篇博客:linux学习笔记1-ubuntu的安装与基本设置 之中,已经介绍了如何安装linux操作系统,以及一些基本的设置修改. 本篇博客主要介绍linux中的一些常用的终端命令 ＝＝＝＝＝＝＝＝ ...

  9. 技海拾贝 - Java

    1. Java中的多线程 http://blog.csdn.net/luoweifu/article/details/46673975 Java中继承thread类与实现Runnable接口的区别 h ...

  10. RealProxy深入

    Program.cs class Program { static void Main(string[] args) { NoMethodLogging(); Console.WriteLine(&q ...