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

前言

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

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

gulp简介

gulp是一个自动化构建工具。在开发过工程中，能够使用gulp对项目进行自动构建，大大提高工作效率。

安装gulp

在安装gulp之前先要确认已经正确安装了node.js，然后在项目根目录下安装gulp：

$ npm install gulp

举例的开发环境配置：

　　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" rel="external nofollow" >
 <link rel="stylesheet" href="css/template.css" rel="external nofollow" >
 <link rel="stylesheet" href="css/news.css" rel="external nofollow" >
</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的配置与搭建详解
  • 详解前端构建工具gulpjs的使用介绍及技巧
  • 使用gulp搭建本地服务器并实现模拟ajax
  • gulp教程_从入门到项目中快速上手使用方法
赞 (0)

相关推荐

  • 前端构建工具之gulp的配置与搭建详解

    前端构建工具之gulp的配置与搭建详解

    前言 在如今的前端开发中,已经不再是一些静态文件了. 对于很多Web App来说,前端代码甚至比后端更加复杂,更加难以管理,这主要来源于一下几个方面: 1.许多第三方库的依赖需要自动运行 2.独立的前端测试需要自动运行 3.代码需要发布时打包 一.为什么要使用gulp? 在我们的工作流程里,应该尽量减少重复的工作,很多任务都可以自动去执行,比如一些相关文件的操作,自动监视一些文件的变化,发生变化以后,就去执行事先设计好的任务. 说了这么多,那么gulp到底能做什么? a.创建项目工程 b.压缩各

  • 详解前端构建工具gulpjs的使用介绍及技巧

    gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm install -g gulp 全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次

  • gulp教程_从入门到项目中快速上手使用方法

    gulp是什么? gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率.在 Web 前端开发工作中有很多"重复工作",比如压缩CSS/JS文件.而这些工作都是有规律的.找到这些规律,并编写 gulp 配置代码,让 gulp 自动执行这些"重复工作" 一.安装gulp与压缩js文件 命令: npm install gulp -g npm install gulp --save-dev 初始化项目package.json的配置:n

  • 使用gulp搭建本地服务器并实现模拟ajax

    使用gulp搭建本地服务器并实现模拟ajax

    本文主要给大家总结了在工作中可能会用到的小工具,在此记录一下. 可以实现的功能有: 1. 本地http服务器 2.页面实时刷新 3.可以模拟ajax请求 第一步,新建package.json文件. 用到了gulp.gulp-webserver.gulp-livereload package.json的内容如下: { "name": "localserver", "version": "1.0.0", "descrip

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

    前言 在做纯静态页面开发的过程中,难免会遇到一些的尴尬问题.比如:整套代码有50个页面,其中有40个页面顶部和底部模块相同.那么同样的两段代码我们复制了40遍(最难受的方法).然后,这个问题就这样解决了.再然后,产品经理看了几遍后突然说顶部的某块需要改改设计...突然感觉好尴尬~~(心里是万马奔腾~),然后呢?然后就期待下一次的万马奔腾!!! 虽然类似问题的解决方案很多,但是纯前端,不用各种框架的情况下,一种比iframe更靠谱的解决方案莫过于用像gulp这样的构建工具来完成.虽然在体验上也许会

  • Python使用爬虫爬取静态网页图片的方法详解

    Python使用爬虫爬取静态网页图片的方法详解

    本文实例讲述了Python使用爬虫爬取静态网页图片的方法.分享给大家供大家参考,具体如下: 爬虫理论基础 其实爬虫没有大家想象的那么复杂,有时候也就是几行代码的事儿,千万不要把自己吓倒了.这篇就清晰地讲解一下利用Python爬虫的理论基础. 首先说明爬虫分为三个步骤,也就需要用到三个工具. ① 利用网页下载器将网页的源码等资源下载. ② 利用URL管理器管理下载下来的URL ③ 利用网页解析器解析需要的URL,进而进行匹配. 网页下载器 网页下载器常用的有两个.一个是Python自带的urlli

  • 对Pyhon实现静态变量全局变量的方法详解

    python不能像C++一样直接定义一个static变量或者通过extern来导入别的库的变量而实现数据共享,但是python的思想是通过模块化来解决这个问题,就是通过模块来实现全局变量. 首先新建一个global_var_model .py的文件,也就是存储全局变量的模块 # coding=utf-8 #在别的文件使用方法: #import global_var_model as gl #gl.gl_int_i += 4,可以通过访问和修改gl.gl_int_i来实现python的全局变量,或

  • Python使用Dash开发网页应用的方法详解

    Python使用Dash开发网页应用的方法详解

    目录 Python Dash开发Web应用的控件基础 一.Dash的布局Layout 1.Dash的HTML组件 2.Dash的Core组件 二.Dash Core中的Checklist Python Dash开发Web应用的控件基础 本文主要是通过Dash的Checklist组件,简单介绍使用Dash开发的Web应用 展示效果如下: python dash简单基础 Dash应用程序由两部分组成: 第一部分是应用程序的布局(Layout),它描述了应用程序的外观. 第二部分描述了应用程序的交互性

  • Linux使用Node.js建立访问静态网页的服务实例详解

    Linux使用Node.js建立访问静态网页的服务实例详解 一.安装node.js运行所需要的环境,:http://www.jb51.net/article/79536.htm 二.创建node目录(/node/www),并在目录下创建node.js服务文件server.js var http = require('http'); var fs = require('fs');//引入文件读取模块 var documentRoot = '/node/www';//需要访问的文件的存放目录 var

  • Ubuntu中静态DNS配置的方法详解

    Ubuntu中静态DNS配置的方法详解

    DNS服务的简介: DNS(Domain Name Server,域名服务器)是进行域名(domain name)和与之相对应的IP地址 (IP address)转换的服务器.DNS中保存了一张域名(domain name)和与之相对应的IP地址 (IP address)的表,以解析消息的域名. 因为实验室实现的拟态存储系统需要实现动态变更ip地址,所以需要搭建一个dns服务器,并且将需要查询变更ip地址的服务器都绑定到同一台dns服务器之上.通常在RedHat系列(eg:Fedora,Cent

  • php中static静态变量的使用方法详解

    看看下面的实例: 复制代码 代码如下: <?php function Test() { $w3sky = 0; echo $w3sky; $w3sky++; } ?> 本函数每次调用时都会将 $w3sky 的值设为 0 并输出 "0".将变量加一的 $w3sky++ 没有其到效果,因为一旦退出本函数则变量 $w3sky 就不存在了.要写一个不会丢失本次计数值的计数函数,要将变量 $w3sky 定义为静态(static)的: 如下: 复制代码 代码如下: <?php f

  • ThinkPHP 3.2.3实现页面静态化功能的方法详解

    前言 大家都知道PHP 的页面静态化有多种实现方式,比如使用输出缓冲(output buffering),该种方式是把数据缓存在 PHP 的缓冲区(内存)中,下一次取数据时直接从缓冲区中读取数据,从而避免了脚本的编译和访问数据库等过程:另一种方式是直接生成静态的 HTML 文件,使用文件读写函数来实现,一些内容不经常改动的页面可以使用静态页面,访客访问到的页面就是真实的 HTML 页面,一些常见的 CMS 会使用该种方法. 以第二种方法为例,参考 DedeCMS 5.7 的静态化功能,在 Thi

  • Java获取网页数据步骤方法详解

    在很多行业当中,我们需要对行业进行分析,就需要对这个行业的数据进行分类,汇总,及时分析行业的数据,对于公司未来的发展,有很好的参照和横向对比.面前通过网络进行数据获取是一个很有效而且快捷的方式. 首先我们来简单的介绍一下,利用java对网页数据进行抓取的一些步骤,有不足的地方,还望指正,哈哈.屁话不多说了. 其实一般分为以下步骤: 1:通过HttpClient请求到达某网页的url访问地址(特别需要注意的是请求方式) 2:获取网页源码 3:查看源码是否有我们需要提取的数据 4:对源码进行拆解,一

  • JavaScript实现网页带动画返回顶部的方法详解

    服务器由阿里云换到了腾讯云,我的代码之前一直都是托管在git上的,但是搬家的时候,可能是着急了,之前有些新加的文件没有托管到git上,所以,就丢了. 不过无所谓了,可以重新写嘛. 之前博客的回到顶部功能是请之前的一位前端的同事帮忙写的,这次打算自己尝试一下. 返回顶部无非就是锚点. 第一个版本: <body style="height:2000px;"> <div id="topAnchor"></div> <a href=

随机推荐