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


Posted in Javascript onJanuary 09, 2018

前言

在做纯静态页面开发的过程中,难免会遇到一些的尴尬问题。比如:整套代码有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文件的代码,这样才能更模块一点。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JS 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 Javascript
js window.print实现打印特定控件或内容
Sep 16 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
ES6学习教程之块级作用域详解
Oct 09 Javascript
javascript将非数值转换为数值
Sep 13 Javascript
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
Vue-cli3生成的Vue项目加载Mxgraph方法示例
May 31 Javascript
Element InputNumber 计数器的实现示例
Aug 03 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 #Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 #Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 #Javascript
基于vue-ssr服务端渲染入门详解
Jan 08 #Javascript
浅谈Vue2.0父子组件间事件派发机制
Jan 08 #Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 #jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 #jQuery
You might like
把PHP安装为Apache DSO
2006/10/09 PHP
php多用户读写文件冲突的解决办法
2013/11/06 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
jQuery 全选效果实现代码
2009/03/23 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
动态添加option及createElement使用示例
2014/01/26 Javascript
js 加密压缩出现bug解决方案
2014/11/25 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
React路由管理之React Router总结
2018/05/10 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
Python3使用requests发闪存的方法
2016/05/11 Python
Python按行读取文件的简单实现方法
2016/06/22 Python
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
python for 循环获取index索引的方法
2019/02/01 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
大专生毕业的自我评价
2014/02/06 职场文书
《夏夜多美》教学反思
2014/02/17 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
PHP设计模式(观察者模式)
2021/07/07 PHP