首頁 > web前端 > js教程 > 主體

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

亚连
發布: 2018-06-12 18:09:38
原創
2033 人瀏覽過

眾所周知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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!