快捷導(dǎo)航

Gulp實(shí)現(xiàn)靜態(tài)網(wǎng)頁(yè)模塊化的方法詳解

更新時(shí)間：2018年01月09日 09:48:32 作者：ASER_1989

眾所周知Gulp.js 是一個(gè)自動(dòng)化構(gòu)建工具,開(kāi)發(fā)者可以使用它在項(xiàng)目開(kāi)發(fā)過(guò)程中自動(dòng)執(zhí)行常見(jiàn)任務(wù)。下面這篇文章主要給大家介紹了關(guān)于Gulp實(shí)現(xiàn)靜態(tài)網(wǎng)頁(yè)模塊化的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。

前言

在做純靜態(tài)頁(yè)面開(kāi)發(fā)的過(guò)程中，難免會(huì)遇到一些的尷尬問(wèn)題。比如：整套代碼有50個(gè)頁(yè)面，其中有40個(gè)頁(yè)面頂部和底部模塊相同。那么同樣的兩段代碼我們復(fù)制了40遍（最難受的方法）。然后，這個(gè)問(wèn)題就這樣解決了。再然后，產(chǎn)品經(jīng)理看了幾遍后突然說(shuō)頂部的某塊需要改改設(shè)計(jì)。。。突然感覺(jué)好尷尬~~（心里是萬(wàn)馬奔騰~），然后呢？然后就期待下一次的萬(wàn)馬奔騰?。?！

雖然類似問(wèn)題的解決方案很多，但是純前端，不用各種框架的情況下，一種比iframe更靠譜的解決方案莫過(guò)于用像gulp這樣的構(gòu)建工具來(lái)完成。雖然在體驗(yàn)上也許會(huì)有一點(diǎn)小小的瑕疵（每次改完文件要預(yù)覽，都需要先gulp一下），但是也并非是不能忍受。畢竟我們想要的僅僅是改一改某公共模塊就能達(dá)到解決40個(gè)頁(yè)面的目的。

gulp簡(jiǎn)介

gulp是一個(gè)自動(dòng)化構(gòu)建工具。在開(kāi)發(fā)過(guò)工程中，能夠使用gulp對(duì)項(xiàng)目進(jìn)行自動(dòng)構(gòu)建，大大提高工作效率。

安裝gulp

在安裝gulp之前先要確認(rèn)已經(jīng)正確安裝了node.js，然后在項(xiàng)目根目錄下安裝gulp：

$ npm install gulp

舉例的開(kāi)發(fā)環(huán)境配置：

　　Windows：在iis里搭建項(xiàng)目，方便在瀏覽器中預(yù)覽；使用webstorm編輯器（習(xí)慣了，感覺(jué)比記事本還是要好用很多，還可以忽略某些文件夾）。

　　MacOs：在apache里搭建項(xiàng)目，方便在瀏覽器中預(yù)覽；使用webstorm編輯器（習(xí)慣了，感覺(jué)比sublime用得更liu一點(diǎn)，還可以忽略某些文件夾）。

必備插件：

　　gulp-file-include

技能描述：

　　將需要模塊化的html代碼放到一個(gè)獨(dú)立的html文件中。如：head.html

　　然后在需要使用的地方使用：@@include('./head.html')

　　文件路徑自定義~~

　　最后配置好gulp并執(zhí)行

使用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('../Layout/head.html')
<div class="news"> 
</div>
@@include('../Layout/foot.html')
</body>

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']);
})

技能介紹：

執(zhí)行 gulp prew 會(huì)將文件復(fù)制到prew目錄下，并生成對(duì)應(yīng)的完整html文件。（注：此處將pages文件夾下的文件直接放到了prew根目錄下，并非prew/pages。根據(jù)需要自改配置）

執(zhí)行 gulp watch后gulp會(huì)建立一個(gè)監(jiān)聽(tīng)進(jìn)程，在開(kāi)發(fā)的時(shí)候每次修改文件后，gulp會(huì)自動(dòng)執(zhí)行prew，這樣就不用每次都手動(dòng)執(zhí)行gulp prew然后再去刷瀏覽器。（這是一招實(shí)用技能）

最后：

這套技能的要點(diǎn)不在于如何使用gulp，而是怎么去劃分模塊。每個(gè)模塊除了有html代碼以外，其實(shí)還可以有js、css代碼或者引入js、css文件的代碼，這樣才能更模塊一點(diǎn)。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: