眾所周知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文件的代碼，這樣才能更模塊一點。

上面是我整理給大家的，希望今后會對大家有幫助。

相關文章：

總結

以上是生活随笔為你收集整理的gulp html 模块化,使用Gulp如何实现静态网页模块化具体怎么做？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。