前言:

  在做纯静态页面开发的过程中,难免会遇到一些的尴尬问题。比如:整套代码有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. PHP能引起安全的函数

    php中需要禁用以下函数来提高安全性 打开php.ini  找到 disable_functions .然后禁用以下函数 disable_functions = pcntl_alarm, pcntl_ ...

  2. Python的Web应用框架--Django

    一:简介 python的web框架有很多,个人查了一下,有Django.Pylons. Tornado.Bottle和Flask等,其中使用人数最多的是Django,而我学习Django也是因为ope ...

  3. Web前端学习——HTML

    HTML其实还是蛮容易学习的,无非就是一些标签.格式的填写,大学的时候也做过网站设计,所以这里主要记录一些常用的HTML标签.属性以及书写方法等. 一.常见HTML格式 主要包含文件type,html ...

  4. JS 获取上传文件的内容

    <div> 上传文件 : <input type="file" name = "file" id = "fileId" / ...

  5. 数据结构(C实现)------- 最小生成树之Prim算法

    [本文是自己学习所做笔记.欢迎转载.但请注明出处:http://blog.csdn.net/jesson20121020] 算法描写叙述 假设连通图是一个网,则称该网中全部生成树中权值总和最小的生成树 ...

  6. Implement Queue using Stacks(用栈实现队列)

    Implement the following operations of a queue using stacks. push(x) -- Push element x to the back of ...

  7. 【ODPS】TableTunnel单线程简单下载事例

    ODPS Tunnel是ODPS的数据通道,用户能够通过Tunnel向ODPS中上传或者下载数据.眼下Tunnel仅支持表(不包含视图View)数据的上传下载. 主要接口 描写叙述 TableTunn ...

  8. x86内存映射

    Contents 1 "Low" memory (< 1 MiB) 1.1 Overview 1.2 BIOS Data Area (BDA) 1.3 Extended BI ...

  9. Python 项目实践一(外星人入侵)第二篇

    接着上次的继续学习. 一 创建一个设置类 每次给游戏添加新功能时,通常也将引入一些新设置.下面来编写一个名为settings的模块,其中包含一个名为Settings的类,用于将所有设置存储在一个地方, ...

  10. 【SqlServer系列】语法定义符号解析

    1   概述 在数据库函数定义中,经常用到这些符号:<>,::=,[],{},|,..,(),!!   .这篇文章简要概述这些符号. 2   具体内容 2.1  <> < ...