溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關Gulp如何實現靜態網頁模塊化的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
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('../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']);
})技能介紹：
執行 gulp prew 會將文件復制到prew目錄下，并生成對應的完整html文件。（注：此處將pages文件夾下的文件直接放到了prew根目錄下，并非prew/pages。根據需要自改配置）
執行 gulp watch后gulp會建立一個監聽進程，在開發的時候每次修改文件后，gulp會自動執行prew，這樣就不用每次都手動執行gulp prew然后再去刷瀏覽器。（這是一招實用技能）
最后：
這套技能的要點不在于如何使用gulp，而是怎么去劃分模塊。每個模塊除了有html代碼以外，其實還可以有js、css代碼或者引入js、css文件的代碼，這樣才能更模塊一點。
感謝各位的閱讀！關于“Gulp如何實現靜態網頁模塊化”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
