首頁 > 文章 > web前端 > 使用Gulp如何實現靜態網頁模組化具體怎麼做？

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

亚连原創: 2018-06-12 18:09:381900瀏覽

眾所周知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：




 
 
 
 
 
 


@@include('../Layout/head.html')
 

@@include('../Layout/foot.html')

## 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檔案的程式碼，這樣才能更模組一點。

上面是我整理給大家的，希望今後對大家有幫助。相關文章：

利用node.js等技術如何實現登入註冊功能？