Gulp实现静态网页模块化实例分享
在做纯静态页面开发的过程中，难免会遇到一些的尴尬问题。比如：整套代码有50个页面，其中有40个页面顶部和底部模块相同。那么同样的两段代码我们复制了40遍（最难受的方法）。众所周知Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。下面这篇文章主要给大家介绍了关于Gulp实现静态网页模块化的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。
虽然类似问题的解决方案很多，但是纯前端，不用各种框架的情况下，一种比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')
<p class="news">
</p>
@@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实现静态网页模块化实例分享的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
Edge浏览器怎么将网页用快捷方式发送到桌面？
Mar 14, 2024 pm 05:22 PM
Edge浏览器怎么将网页用快捷方式发送到桌面？我们很多用户为了方便直接打开访问页面，想要将经常使用的网页以快捷方式的形式显示在桌面，但是不知道应该如何操作，针对这个问题，本期小编就来和广大用户们分享解决方法，一起来看看今日软件教程分享的内容吧。 Edge浏览器将网页发送到桌面快捷方式方法： 1、打开软件，点击页面中的“...”按钮。 2、在下拉菜单选项中选择“应用”中的“将此站点作为应用安装”。 3、最后在弹出的窗口中将其
网页自动刷新设置方法
Oct 26, 2023 am 10:52 AM
设置网页的自动刷新可以使用HTML的“meta”标签、JavaScript的“setTimeout”函数、“setInterval”函数或HTTP的”Refresh“头。详细介绍：1、使用HTML的“meta”标签，在HTML文档的“<head>”标签中，可以使用“meta”标签来设置网页的自动刷新；2、JavaScript的“setTimeout”函数等等。
网页图片加载不出来怎么办？6种解决办法
Mar 15, 2024 am 10:30 AM
有网友发现打开浏览器网页，网页上的图片迟迟加载不出来，是怎么回事？检查过网络是正常的，那是哪里出现了问题呢？下面小编就给大家介绍一下网页图片加载不出来的六种解决方法。 网页图片加载不出来： 1、网速问题 网页显示不出图片有可能是因为电脑的网速比较慢，电脑中开启的软件比较多， 而我们访问的图片比较大，这就可能因为加载超时，导致图片显示不出来， 可以将比较占网速的软件将关掉，可以去任务管理器查看一下。 2、访问人数过多 网页显示不出图片还有可能是因为我们访问的网页，在同时间段访问的
网页无法访问怎么办
Sep 06, 2023 am 09:36 AM
网页无法访问的解决办法有检查网络连接、清除浏览器缓存、检查网页地址、尝试使用其他浏览器、检查服务器状态、检查域名解析、检查防火墙和安全设置和联系网站管理员等。详细介绍：1、检查网络连接，确保网络连接正常，可以尝试打开其他网页或者使用其他设备进行访问，确定是否是网络连接问题，如果其他网页可以正常访问，那么可能是该网页的问题；2、清除浏览器缓存，浏览器缓存可能导致网页无法加载等等。
网络连接正常但浏览器无法访问网页可能原因
Feb 19, 2024 pm 03:45 PM
浏览器打不开网页但是网络正常，可能的原因是多种多样的。在该问题出现时，我们需要逐步排查，才能确定具体的原因并解决问题。首先，确定网页打不开的现象是局限于某个特定的浏览器还是所有浏览器都无法打开网页。如果只有一个浏览器无法打开网页，可以尝试使用其他浏览器，如谷歌浏览器、火狐浏览器等进行测试。如果其他浏览器能够正常打开网页，那么问题很可能出在该特定浏览器上，可能
如何优化Java代码的可维护性：经验与建议
Nov 22, 2023 pm 05:18 PM
如何优化Java代码的可维护性：经验与建议在软件开发过程中，编写具有良好可维护性的代码是至关重要的。可维护性意味着代码能够被轻松理解、修改和扩展，而不会引发意外的问题或额外的工作量。对于Java开发者来说，如何优化代码的可维护性是一个重要课题。本文将分享一些经验和建议，帮助Java开发者提升其代码的可维护性。遵循规范的命名规则规范的命名规则能够使代码更易读，
网页打不开怎么解决
Feb 21, 2024 am 10:24 AM
网页打不开怎么解决随着互联网的快速发展，人们越来越依赖于互联网来获取信息、进行交流和娱乐。然而，有时我们会遇到网页打不开的问题，这给我们带来了很多困扰。本文将为大家介绍一些常见的方法，帮助解决网页打不开的问题。首先，我们需要确定是由于什么原因导致网页打不开。可能的原因包括网络问题、服务器问题、浏览器设置问题等。下面是一些解决方法：检查网络连接：首先，我们需要
php怎么在网页打开
Mar 22, 2024 pm 03:20 PM
在网页中执行 PHP 代码需要确保 Web 服务器支持并已正确配置 PHP。可以通过三种方式打开 PHP： * **服务器环境：**将 PHP 文件放置在服务器根目录并通过浏览器访问。 * **集成开发环境：**将 PHP 文件放置在指定 Web 根目录并通过浏览器访问。 * **远程服务器：**通过服务器提供的 URL 地址访问托管在远程服务器上的 PHP 文件。
