社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 web前端 js教程 使用Gulp如何实现静态网页模块化具体怎么做？

使用Gulp如何实现静态网页模块化具体怎么做？

亚连
亚连
Jun 12, 2018 pm 06:09 PM
gulp 模块化

众所周知Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。下面这篇文章主要给大家介绍了关于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(&#39;../Layout/head.html&#39;)
<p class="news"> 
</p>
@@include(&#39;../Layout/foot.html&#39;)
</body>
登录后复制

gulp：

var gulp = require(&#39;gulp&#39;),
 fileinclude = require(&#39;gulp-file-include&#39;);
gulp.task(&#39;prew&#39;, function () {
 gulp.src([&#39;*.html&#39;,&#39;pages/*.html&#39;, &#39;!node_modules/**/*.html&#39;])
  .pipe(fileinclude({
   prefix: &#39;@@&#39;,
   basepath: &#39;@file&#39;
  }))
  .pipe(gulp.dest(&#39;prew&#39;));
 gulp.src([&#39;**/**.js&#39;, &#39;!node_modules/**/*&#39;]).pipe(gulp.dest(&#39;prew/&#39;));
 gulp.src([&#39;**/**.css&#39;, &#39;!node_modules/**/*&#39;]).pipe(gulp.dest(&#39;prew/&#39;));
 gulp.src([&#39;**/*.jpg&#39;,
  &#39;**/*.jpge&#39;,
  &#39;**/*.png&#39;,
  &#39;**/*.gif&#39;,
  &#39;**/*.bmp&#39;, &#39;!prew/**/*&#39;, &#39;!node_modules/**/*&#39;]).pipe(gulp.dest(&#39;prew/&#39;));
});
gulp.task(&#39;watch&#39;,function () {
 gulp.watch([&#39;pages/*.html&#39;,&#39;css/*.css&#39;,&#39;img/**/*&#39;,&#39;!prew/**/*.html&#39;,&#39;!prew/**/*.css&#39;,&#39;!prew/img/**/*&#39;], [&#39;prew&#39;]);
})
登录后复制

技能介绍：

执行 gulp prew 会将文件复制到prew目录下，并生成对应的完整html文件。（注：此处将pages文件夹下的文件直接放到了prew根目录下，并非prew/pages。根据需要自改配置）

执行 gulp watch后gulp会建立一个监听进程，在开发的时候每次修改文件后，gulp会自动执行prew，这样就不用每次都手动执行gulp prew然后再去刷浏览器。（这是一招实用技能）

最后：

这套技能的要点不在于如何使用gulp，而是怎么去划分模块。每个模块除了有html代码以外，其实还可以有js、css代码或者引入js、css文件的代码，这样才能更模块一点。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

利用node.js等技术如何实现登录注册功能？

使用JS如何才能获取SessionStorage的值

在JS中有关兼容浏览器问题

有关Axios的配置步骤（详细教程）

在Vuex中详细解读模块化组织

使用nodejs如何实现聊天功能？

以上是使用Gulp如何实现静态网页模块化具体怎么做？的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

R.E.P.O.能量晶体解释及其做什么（黄色晶体）
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
2 周前 By DDD
R.E.P.O.如果您听不到任何人，如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解锁Myrise中的所有内容
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
显示更多

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里
7487
15
CakePHP 教程
1377
52
steam的账户名称是什么格式
77
11
win11激活密钥永久
51
19
NYT连接提示和答案
19
39
显示更多
Related knowledge
如何优化Java代码的可维护性：经验与建议 如何优化Java代码的可维护性：经验与建议 Nov 22, 2023 pm 05:18 PM

如何优化Java代码的可维护性：经验与建议在软件开发过程中，编写具有良好可维护性的代码是至关重要的。可维护性意味着代码能够被轻松理解、修改和扩展，而不会引发意外的问题或额外的工作量。对于Java开发者来说，如何优化代码的可维护性是一个重要课题。本文将分享一些经验和建议，帮助Java开发者提升其代码的可维护性。遵循规范的命名规则规范的命名规则能够使代码更易读，

如何解决Python的代码中的代码复杂度过高错误？ 如何解决Python的代码中的代码复杂度过高错误？ Jun 24, 2023 pm 05:43 PM

Python是一门简单易学高效的编程语言，但是当我们在编写Python代码时，可能会遇到一些代码复杂度过高的问题。这些问题如果不解决，会使得代码难以维护，容易出错，降低代码的可读性和可扩展性。因此，在本文中，我们将讨论如何解决Python代码中的代码复杂度过高错误。了解代码复杂度代码复杂度是一种度量代码难以理解和维护的性质。在Python中，有一些指标可以用

如何解决Python的代码的可维护性差错误？ 如何解决Python的代码的可维护性差错误？ Jun 25, 2023 am 11:58 AM

Python作为一门高级编程语言，在软件开发中得到了广泛应用。虽然Python有许多优点，但很多Python程序员经常面临的问题是，代码的可维护性较差。Python代码的可维护性包括代码的易读性、可扩展性、可重用性等方面。在本篇文章中，我们将着重讨论如何解决Python代码的可维护性差的问题。一、代码的易读性代码可读性是指代码的易读程度，它是代码可维护性的核

Vue大型项目中实现模块化开发指南 Vue大型项目中实现模块化开发指南 Jun 09, 2023 pm 04:07 PM

在现代化的Web开发中，Vue作为一款灵活、易上手且功能强大的前端框架，被广泛应用于各种网站和应用程序的开发中。在开发大型项目时，如何简化代码的复杂度，使项目更易于维护，是每个开发者必须面对的问题。而模块化开发，可以帮助我们更好地组织代码，提高开发效率和代码可读性。下面，我将分享一些在Vue大型项目中实现模块化开发的经验和指南：1.分工明确在一个大型项目中

vue中什么是模块化 vue中什么是模块化 Dec 23, 2022 pm 06:06 PM

在vue中，模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块（方便代码的重用，从而提升开发效率，并且方便后期的维护）。模块化开发的好处：1、条理清晰，便于维护；2、不会一次将所有数据请求回来，用户体验感好；3、模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块。

如何使用Go语言进行代码模块化实践 如何使用Go语言进行代码模块化实践 Aug 03, 2023 am 10:31 AM

如何使用Go语言进行代码模块化实践引言：在软件开发中，代码模块化是一种常用的开发方法论，通过将代码划分为可重用的模块，可以提高代码的可维护性、可测试性和可复用性。本文将介绍如何使用Go语言进行代码模块化实践，并提供相应的代码示例。一、模块化的优势提高代码可维护性：模块化将代码分割为独立的功能模块，每个模块负责特定的任务，使得代码更加清晰和易于修改。提高代码可

Python开发经验总结：提高代码可维护性和可扩展性的实践 Python开发经验总结：提高代码可维护性和可扩展性的实践 Nov 22, 2023 pm 12:22 PM

Python开发经验总结：提高代码可维护性和可扩展性的实践在软件开发过程中，我们经常会遇到需求变更、功能迭代等情况，因此代码的可维护性和可扩展性成为了开发过程中必须重视的问题。特别是在Python开发中，如何提高代码的可维护性和可扩展性成为了开发者们共同关注的议题。本文将会总结一些提高Python代码可维护性和可扩展性的实践，希望可以给Python开发者们带

超恩推出 TGS-1000 系列工业迷你主机：支持堆叠接口扩展模块，搭载 MTL 处理器 超恩推出 TGS-1000 系列工业迷你主机：支持堆叠接口扩展模块，搭载 MTL 处理器 Aug 14, 2024 pm 01:33 PM

本站8月14日消息，超恩Vecow北京时间7月22日推出了搭载英特尔酷睿Ultra第一代处理器的TGS-1000系列工业迷你主机。该系列产品的特色在于支持垂直堆叠扩展出额外I/O端口。TGS-1000系列分为TGS-1000与TGS-1500两个型号，区别在于TGS-1500底部包含一个支持MXM显卡的模块，可选英特尔锐炫A370M或至高RTX5000Ada移动版的英伟达专业卡。▲TGS-1500TGS-1000系列迷你主机可选英特尔酷睿Ultra7165H或Ultra5135H处理器，配备双D

See all articles