使用Gulp如何實現靜態網頁模組化具體怎麼做？-js教程-PHP中文網

首頁

web前端

js教程

使用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工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7496

CakePHP 教程

1377

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

如何優化Java程式碼的可維護性：經驗與建議 Nov 22, 2023 pm 05:18 PM

如何優化Java程式碼的可維護性：經驗與建議在軟體開發過程中，編寫具有良好可維護性的程式碼是至關重要的。可維護性意味著程式碼能夠被輕鬆理解、修改和擴展，而不會引發意外的問題或額外的工作量。對於Java開發者來說，如何優化程式碼的可維護性是一個重要課題。本文將分享一些經驗和建議，幫助Java開發者提升其程式碼的可維護性。遵循規範的命名規則規範的命名規則能夠使程式碼更易讀，

如何解決Python的程式碼中的程式碼複雜度過高錯誤？ Jun 24, 2023 pm 05:43 PM

Python是一門簡單易學高效的程式語言，但當我們在編寫Python程式碼時，可能會遇到一些程式碼複雜度過高的問題。這些問題如果不解決，會使得程式碼難以維護，容易出錯，降低程式碼的可讀性和可擴充性。因此，在本文中，我們將討論如何解決Python程式碼中的程式碼複雜度過高錯誤。了解程式碼複雜度程式碼複雜度是一種度量程式碼難以理解和維護的性質。在Python中，有一些指標可以用

如何解決Python的程式碼的可維護性差錯誤？ Jun 25, 2023 am 11:58 AM

Python作為一門高階程式語言，在軟體開發中得到了廣泛應用。雖然Python有許多優點，但許多Python程式設計師經常面臨的問題是，程式碼的可維護性較差。 Python程式碼的可維護性包括程式碼的易讀性、可擴充性、可重複使用性等面向。在本篇文章中，我們將著重討論如何解決Python程式碼的可維護性差的問題。一、代碼的易讀性代碼可讀性是指代碼的易讀程度，它是代碼可維護性的核

Vue大型專案中實作模組化開發指南 Jun 09, 2023 pm 04:07 PM

在現代化的網路開發中，Vue作為一款靈活、易上手且功能強大的前端框架，被廣泛應用於各種網站和應用程式的開發中。在開發大型專案時，如何簡化程式碼的複雜度，讓專案更容易維護，是每個開發者都必須面對的問題。而模組化開發，可以幫助我們更好地組織程式碼，提高開發效率和程式碼可讀性。下面，我將分享一些在Vue大型專案中實現模組化開發的經驗和指南：1.分工明確在一個大型專案中

vue中什麼是模組化 Dec 23, 2022 pm 06:06 PM

在vue中，模組化就是把單獨的一個功能封裝到一個模組（檔案）中，模組之間相互隔離，但是可以透過特定的介面公開內部成員，也可以依賴別的模組（方便程式碼的重用，從而提升開發效率，並且方便後期的維護）。模組化開發的好處：1、條理清晰，便於維護；2、不會一次將所有資料請求回來，使用者體驗感好；3、模組之間相互隔離，但是可以透過特定的介面公開內部成員，也可以依賴別的模組。

如何使用Go語言進行程式碼模組化實踐 Aug 03, 2023 am 10:31 AM

如何使用Go語言進行程式碼模組化實踐引言：在軟體開發中，程式碼模組化是一種常用的開發方法論，透過將程式碼劃分為可重複使用的模組，可以提高程式碼的可維護性、可測試性和可復用性。本文將介紹如何使用Go語言進行程式碼模組化實踐，並提供對應的程式碼範例。一、模組化的優勢提高程式碼可維護性：模組化將程式碼分割為獨立的功能模組，每個模組負責特定的任務，使得程式碼更加清晰和易於修改。提高程式碼可

Python開發經驗總結：提高程式碼可維護性和可擴展性的實踐 Nov 22, 2023 pm 12:22 PM

Python開發經驗總結：提高程式碼可維護性和可擴展性的實踐在軟體開發過程中，我們經常會遇到需求變更、功能迭代等情況，因此程式碼的可維護性和可擴展性成為了開發過程中必須重視的問題。特別是在Python開發中，如何提高程式碼的可維護性和可擴展性成為了開發者共同關注的議題。本文將會總結一些提高Python程式碼可維護性和可擴充性的實踐，希望可以為Python開發者帶

超恩推出 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

使用Gulp如何實現靜態網頁模組化具體怎麼做？

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題