前言：

　　在做纯静态页面开发的过程中，难免会遇到一些的尴尬问题。比如：整套代码有50个页面，其中有40个页面顶部和底部模块相同。那么同样的两段代码我们复制了40遍（最难受的方法）。然后，这个问题就这样解决了。再然后，产品经理看了几遍后突然说顶部的某块需要改改设计。。。突然感觉好尴尬~~（心里是万马奔腾~），然后呢？然后就期待下一次的万马奔腾！！！

　　虽然类似问题的解决方案很多，但是纯前端，不用各种框架的情况下，一种比iframe更靠谱的解决方案莫过于用像gulp这样的构建工具来完成。虽然在体验上也许会有一点小小的瑕疵（每次改完文件要预览，都需要先gulp一下），但是也并非是不能忍受。毕竟我们想要的仅仅是改一改某公共模块就能达到解决40个页面的目的。

举例的开发环境配置：

　　Windows：在iis里搭建项目，方便在浏览器中预览；使用webstorm编辑器（习惯了，感觉比记事本还是要好用很多，还可以忽略某些文件夹）。

　　MacOs：   在apache里搭建项目，方便在浏览器中预览；使用webstorm编辑器（习惯了，感觉比sublime用得更liu一点，还可以忽略某些文件夹）。

必备插件：

　　gulp-file-include

技能描述：

　　将需要模块化的html代码放到一个独立的html文件中。如：head.html

　　然后在需要使用的地方使用：@@include('./head.html')

　　文件路径自定义~~

　　最后配置好gulp并执行

使用Demo：

　　html：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">

    <title></title>

    <link rel="stylesheet" href="css/comm.css?v=1.13">

    <link rel="stylesheet" href="css/template.css">

    <link rel="stylesheet" href="css/news.css">

</head>

<body>

@@include('../Layout/head.html')

<div class="news">

</div>

@@include('../Layout/foot.html')

</body>

　　gulp：

var gulp = require('gulp'),

    fileinclude = require('gulp-file-include');

gulp.task('prew', function () {

    gulp.src(['*.html','pages/*.html', '!node_modules/**/*.html'])

        .pipe(fileinclude({

            prefix: '@@',

            basepath: '@file'

        }))

        .pipe(gulp.dest('prew'));

    gulp.src(['**/**.js', '!node_modules/**/*']).pipe(gulp.dest('prew/'));

    gulp.src(['**/**.css', '!node_modules/**/*']).pipe(gulp.dest('prew/'));

    gulp.src(['**/*.jpg',

        '**/*.jpge',

        '**/*.png',

        '**/*.gif',

        '**/*.bmp', '!prew/**/*', '!node_modules/**/*']).pipe(gulp.dest('prew/'));

});

gulp.task('watch',function () {

    gulp.watch(['pages/*.html','css/*.css','img/**/*','!prew/**/*.html','!prew/**/*.css','!prew/img/**/*'], ['prew']);

})

技能介绍：

　　执行 gulp prew 会将文件复制到prew目录下，并生成对应的完整html文件。（注：此处将pages文件夹下的文件直接放到了prew根目录下，并非prew/pages。根据需要自改配置）

　　执行 gulp watch后gulp会建立一个监听进程，在开发的时候每次修改文件后，gulp会自动执行prew，这样就不用每次都手动执行gulp prew然后再去刷浏览器。（这是一招实用技能）

最后：

　　这套技能的要点不在于如何使用gulp，而是怎么去划分模块。每个模块除了有html代码以外，其实还可以有js、css代码或者引入js、css文件的代码，这样才能更模块一点。

Gulp-静态网页模块化的更多相关文章

  1. Gulp实现静态网页模块化的方法详解

    前言: 在做纯静态页面开发的过程中,难免会遇到一些的尴尬问题.比如:整套代码有50个页面,其中有40个页面顶部和底部模块相同.那么同样的两段代码我们复制了40遍(最难受的方法).然后,这个问题就这样解 ...

  2. 第一次在Django上编写静态网页

    新建一个Python Django工程: Win+R进入cmd命令界面,并cd到指定工程目录下,比如我的工程目录是E:\wamp\Apache24\www\ 输入E: 跳转E盘 输入cd wamp\A ...

  3. HTML静态网页 标签、表格

    HTML静态网页: 打开DREAMWEAVER,新建HTML,如下图: body的属性: bgcolor 页面背景色 background  背景壁纸.图片 text  文字颜色 topmargin ...

  4. 通过jekyll建立静态网页

    部署一个网站需要三个步骤:(1) generating the site, (2) deploying it to the public Internet, and (3) assigning it ...

  5. html部分---认识html静态网页；

    html分类:1.静态网页(html/htm)               2.动态网页              区别:动态网页不需要改动源代码,容易修改 css样式表:美化网页 js:脚本语言,增 ...

  6. div+css模式编写html静态网页例子_仿照网页制作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Excel文件转换为html静态网页

    Excel文件转换为html静态网页:右键另存为:

  8. HTML静态网页（标签、表格）

    HTML静态网页: 打开DREAMWEAVER,新建HTML,如下图: body的属性: bgcolor 页面背景色 background  背景壁纸.图片 text  文字颜色 topmargin ...

  9. 静态网页VS动态网页

    干<沙朗新闻发布系统>什么时候.我们已经建立的网页.html的,并且.aspx,第一次接触.我认为这些东西是一样的,因为它,在观看ASP.NET视频的时候.听见里面讲课的老师有提到了这两样 ...

  10. 如何用phpcms将静态网页生成动态网页？

    在前两篇随笔中已经简单介绍了phpcms,那么现在让我们来看一下如何用phpcms将静态网页生成动态网页? 1.在templates文件夹下新建模板文件夹ceshi(名字可以自己随笔起) 2.在ces ...

随机推荐

  1. Linux下OpenSSL的安装全过程(CentOS6.3 x86 + Openssl 1.1.0e)

    写在前面:安装前先查看下老的openssl版本 (使用  openssl version -a  命令查看来版本),和服务器操作系统版本(uname   -a),升级的原因是,老版的openssl已经 ...

  2. PF_RING install in centos7

    很多centos7是最小化安装. 这样很多kernel就没有安装全,而且很多开发库也没有. 在安装PF_RING过程中,会缺少很多依赖. 首先安装依赖包: yum -y install numactl ...

  3. Express4.x API (二)：Request (译)

    写在前面 最近学习express想要系统的过一遍API,www.expressjs.com是express英文官网(进入www.epxressjs.com.cn发现也是只有前几句话是中文呀~~),所以 ...

  4. Python爬虫(十七)_糗事百科案例

    糗事百科实例 爬取糗事百科段子,假设页面的URL是: http://www.qiushibaike.com/8hr/page/1 要求: 使用requests获取页面信息,用XPath/re做数据提取 ...

  5. js----数组处理之splice（有js原始addClass方法哦）

    上次写了一个轮播的方法:http://blog.csdn.net/stronglyh/article/details/46833499 由于别人问我的时候,给了我html.于是乎我就看到了页面中引用了 ...

  6. JAVA8之lambda表达式具体解释，及stream中的lambda使用

    前言: 本人也是学习lambda不久,可能有些地方描写叙述有误,还请大家谅解及指正! lambda表达式具体解释 一.问题 1.什么是lambda表达式? 2.lambda表达式用来干什么的? 3.l ...

  7. Android 编程之入门开发目录管理器开发文件事件操作-2

    上一篇博客,我们已经得到了目录列表,我们须要对文件列表子项加入事件,比方我们点击的是文件.就运行 打开操作,点击的是目录运行打开目录操作,遍历文件清单.以此类推直到最后一个是文件位置,关于文件 与目录 ...

  8. 【分享】iTOP4412开发板-Bluetooth移植文档

    [分享]iTOP4412开发板-Bluetooth移植文档 最近须要把Bluetooth移植到iTOP-4412 开发平台.查阅了相关资料,经过一段时间的研究.调试,最终成功的将蓝牙功能移植到了开发板 ...

  9. 刚在在win8.1下装了ubuntu12.04

    这是一个開始. 開始我想在win7下,由于我本来是7和win8.1双系统,想直接把win7覆盖了. 可是不知道怎么回事,比較复杂.于是在win8.1下装了. 先把win7的系统盘格式化了. 把下的is ...

  10. JSP具体篇——response对象

    response对象 response对象用于响应client请求,向客户输出信息. 他封装了JSP产生的响应,并发送到client以响应client请求. 1.重定向网页 使用response对象的 ...