前言：

　　在做纯静态页面开发的过程中，难免会遇到一些的尴尬问题。比如：整套代码有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. php中static静态变量的使用方法详解

    php中的变量作用范围的另一个重要特性就是静态变量(static 变量).静态变量仅在局部函数域中存在且只被初始化一次,当程序执行离开此作用域时,其值不会消失,会使用上次执行的结果.     看看下面 ...

  2. ES6 类(Class)基本用法和静态属性+方法详解

    原文地址:http://blog.csdn.net/pcaxb/article/details/53759637 ES6 类(Class)基本用法和静态属性+方法详解 JavaScript语言的传统方 ...

  3. robots.txt文件配置和使用方法详解

    robots.txt文件,提起这个概念,可能不少站长还很陌生:什么是robots.txt文件?robots.txt文件有什么作用?如何配置robots.txt文件?如何正确使用robots.txt文件 ...

  4. C++调用JAVA方法详解

    C++调用JAVA方法详解          博客分类: 本文主要参考http://tech.ccidnet.com/art/1081/20050413/237901_1.html 上的文章. C++ ...

  5. CURL使用方法详解

    php采集神器CURL使用方法详解 作者:佚名  更新时间:2016-10-21   对于做过数据采集的人来说,cURL一定不会陌生.虽然在PHP中有file_get_contents函数可以获取远程 ...

  6. PHP cURL应用实现模拟登录与采集使用方法详解

    对于做过数据采集的人来说,cURL一定不会陌生.虽然在PHP中有file_get_contents函数可以获取远程链接的数据,但是它的可控制性太差了,对于各种复杂情况的采集情景,file_get_co ...

  7. Android源码下载方法详解

    转自:http://www.cnblogs.com/anakin/archive/2011/12/20/2295276.html Android源码下载方法详解 相信很多下载过内核的人都对这个很熟悉 ...

  8. 技巧：Linux 动态库与静态库制作及使用详解

    技巧:Linux 动态库与静态库制作及使用详解 标准库的三种连接方式及静态库制作与使用方法 Linux 应用开发通常要考虑三个问题,即:1)在 Linux 应用程序开发过程中遇到过标准库链接在不同 L ...

  9. asp.net iis URLRewrite 实现方法详解

    原文 asp.net iis URLRewrite 实现方法详解 实现非常简单首先你要在你的项目里引用两个dll:actionlessform.dll.urlrewriter.dll,真正实现重写的是 ...

随机推荐

  1. sonar6.7.6安装及汉化

    sonar下载地址 https://www.sonarqube.org/downloads/ 下载请选择 然后解压 在目录F:\tools\sonarqube-6.7.6\bin\windows-x8 ...

  2. C++ 一个整数的二进制表示中1的个数

    想知道某一位是否为1,只需和当前位对应的2的幂进行按位与运算即可. 如下示例,可以知道第6位是1,同理可知其他位是否为1,累加就能得到1的个数: 10001001 00000000 int cnt = ...

  3. ubuntu RPLIDAR A2的使用

    RPLIDAR是由RoboPeak Team,SlamTec公司开发的低成本2D LIDAR解决方案.它可以扫描6度半径内的360°环境. RPLIDAR的输出非常适合构建地图,做slam或构建3D模 ...

  4. fastcgi_next_upstream error timeout invalid_header http_500 http_503（转）

    location / proxy_pass http://nodelist; fastcgi_next_upstream error timeout invalid_header http_500 h ...

  5. mysql分表操作

    一般分表操作有垂直拆分和水平拆分.顾名思义. 1.  垂直拆分是指,这个表的列,即字段,要拆分成两个或多个表. 这个应用场景比如:这个表字段,几个都是int.datetime等,有那么一个是text类 ...

  6. 有哪些操作会使用到TempDB；如果TempDB异常变大，可能的原因是什么，该如何处理（转载）

    有哪些操作会使用到TempDB:如果TempDB异常变大,可能的原因是什么,该如何处理:tempdb的用途: 存储专用和全局临时变量,不考虑数据库上下文: 与Order by 子句,游标,Group ...

  7. Python基础语法复习

    1.数据类型 List 列表 函数 append(): 在列表末尾追加. count(): 计算对象在列表中出现的次数. extend():将列表内容添加到列表中. index(): 计算对象在列表中 ...

  8. C# DllImport 相对路径无法找到dll

    原文:C# DllImport 相对路径无法找到dll 如题,近期在开发过程中,需要调用C++的库,一般来说,使用下面的方法即可正常调用: [DllImport("hci_sys.dll&q ...

  9. .NET持续集成与自动化部署之路第二篇——使用NuGet.Server搭建公司内部的Nuget(包)管理器

    使用NuGet.Server搭建公司内部的Nuget(包)管理器 前言     Nuget是一个.NET平台下的开源的项目,它是Visual Studio的扩展.在使用Visual Studio开发基 ...

  10. 小白学Docker之基础篇

    系列文章: 小白学Docker之基础篇 小白学Docker之Compose 小白学Docker之Swarm PS: 以下是个人作为新手小白学习docker的笔记总结 1. docker是什么 百科上的 ...