Gulp-静态网页模块化
前言:
在做纯静态页面开发的过程中,难免会遇到一些的尴尬问题。比如:整套代码有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文件的代码,这样才能更模块一点。
转载于:https://www.cnblogs.com/aser1989/p/8206555.html
Gulp-静态网页模块化相关推荐
- gulp html 模块化,使用Gulp如何实现静态网页模块化具体怎么做?
众所周知Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.下面这篇文章主要给大家介绍了关于Gulp实现静态网页模块化的相关资料,文中通过示例代码介绍的非常详细,需 ...
- gulp临时服务器显示html页面,Gulp实现静态网页模块化的方法详解
前言 在做纯静态页面开发的过程中,难免会遇到一些的尴尬问题.比如:整套代码有50个页面,其中有40个页面顶部和底部模块相同.那么同样的两段代码我们复制了40遍(最难受的方法).然后,这个问题就这样解决 ...
- Python爬虫爬取静态网页实例一:爬取内涵段子吧上的段子
最近在学爬虫,这里用实例来与大家分享一下我学习的经验. 这里讲一个爬取静态网页内容的实例,Python一般利用正则表达式爬取静态静态网页的内容,而且因为静态网页源代码固定,不会发生变化,所以比较简单, ...
- 临摹中国慕课静态网页第二周周记(CSS3+JS)
临摹中国慕课静态网页第二周周记(CSS3+JS) 第二周 这周主要是对细节,轮播图,下拉菜单等地完善和JS的学习 学习内容 (1)CSS word-break 属性 属性规定自动换行的处理方法. 语法 ...
- 只需三分钟您就可以用nodejs搭建静态网页服务器(配置静态网页访问目录)
Node.js 中文网Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.j ...
- AWS攻略——使用CodeBuild进行自动化构建和部署静态网页
首先声明下,使用"CodeBuild"部署并不是"正统"的方案,因为AWS提供了"CodeDeploy".如果不希望引入太多基础设施,可以考 ...
- AWS攻略——使用S3托管静态网页
在AWS上有很多部署静态网页的方式,比如使用EC2或者Lightsail.但是不管使用上述哪种方案,都需要预先部署如Nignx或者Apache等Http服务.这对纯前端同学来说可能有点复杂,而AWS提 ...
- 静态网页案例_手把手教你构建网页
网页 网页是构成网站的基本元素,是承载各种网站应用的平台.通俗地说,您的网站就是由网页组成的,如果您只有域名和虚拟主机而没有制作任何网页的话,您的客户仍旧无法访问您的网站. 网页是一个包含HTML ...
- python爬虫如何从一个页面进入另一个页面-Python爬虫 (一):爬取一个简单的静态网页...
版本:python3.7 平台:windows10 工具 :pycharm 断断续续学习了py3爬虫2周左右的时间,发现自己学习的过于零散化,所以想通过这个专栏系统的整理下自己所学过的知识.如有错误, ...
- Freemarker入门小案例(生成静态网页的其中一种方式)
其实生成静态网页的方式有好多种,我昨天看了一下,Freemarker是其中一种,但是Freemarker现在我们都用得比较少了,现在用得ActiveMQ用来发送信息到静态页面,不过想了一下这个小东西, ...
最新文章
- JavaScript 高级技巧 Memoization
- office word 开发
- 前端学习(2588):前端权限的控制思路
- golang 的 tag
- 面试只要问到分布式,必问分布式锁
- MongoDB小型文档型数据库使用
- OC代码调用C++代码的回调函数步骤
- 【剑指offer】面试题五:从尾到头打印链表
- java虚拟机的数据_Java虚拟机运行时数据区域
- Red5java.util.concurrent.RejectedExecutionExceptio
- jspstudy mysql_使用JspStudy集成环境快速部署jsp项目
- win10添加惠普hp laserjet 1010HB打印机
- python基本代码教学_如何真正零基础入门Python?(第一节)
- python二元函数图像在线绘制_numpy,matplotlib
- Duplicate的一点总结
- 分享一个插件-水珠自动下落效果
- 关于音频EQ、DRC、等响度、3D环绕音、虚拟低音、变音、AEC、AGC、ANS等解释
- 2019_IJCAI_Adapting BERT for Target-Oriented Multimodal Sentiment Classification
- 追加安装sticky模块
- E280-2G4T12S(SX1280)_STM21F1X驱动分享
热门文章
- android一些若干回调测试
- 基本上,把switch,用设计模式代替,肯定是bug和过度设计。想想,本来修改一个文件几行代码可以解决的问题,变成修改3-6个类才能实现一样的功能。不是傻是什么?...
- 业界资讯:adobe 技术开发中心 放出游戏单元
- [备忘]Visual Studio常用小技巧
- 如果备份还原SecureCRT、Xshell远程工具远程
- 修复./mysql/proc
- 情怀真的可以吃~致文青
- 《我也能做CTO之.程序员职业规划》 水准之上,期望以下
- linux下软件的基本安装和卸载
- TensorFlow 常见API