當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

gulp+PC前端静态页面项目开发

發布時間：2023/12/9 HTML 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 gulp+PC前端静态页面项目开发小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言：

現在單頁面很流行，但是在 PC 端多頁面還是常態，所以構建靜態頁面的工具還有用武之地

gulp構建前言：

如今我們開發web網頁的方式主要有幾種，使用vue-cli、create-react-app、webpack、不借助構建工具等實現單頁或多頁網站。“工欲善其事，必先利其器”，前三種方式無疑能滿足我們開發網頁的絕大部分需求，但在某些情況下，比如前后端不分離(jsp、php、tpl等嵌套后端語言的方式)，以及單純地開發一些靜態頁(活動頁、幫助手冊等)，使用gulp搭建一個輕量級的前端開發環境是一個選擇。

很多時候我們在寫靜態頁面的時候也希望能和后臺模板一樣，將導航、頁頭、頁腳等公用的部分分離出去，然后引入頁面中。單純的靜態頁面不具備這種功能，而使用 gulp 插件可以很容易的完成，比如 gulp-file-include 插件。

使用gulp的目的：是實現自動化構建，提升開發效率、代碼質量

壓縮html、css、js、圖片
編譯ES6、less/scss
補全css前綴
px轉rem
靜態資源緩存控制
靜態服務器
代碼檢查

gulp創建初始化項目

1）創建初始化項目：

npm install --global gulp // 全局安裝gulpnpm install --global gulp-cli // 安裝gulp命令行工具mkdir my-project // 創建項目目錄并進入 cd my-projectnpm init // 初始化項目，在項目目錄下創建package.json文件 npm install gulp --save-dev //在項目中安裝gulp npm install gulp-file-include --save-dev //安裝 gulp-file-include 插件gulp --version // 檢查gulp版本

2）根目錄下創建一個名為gulpfile.js的文件
gulpfile.js 配置如下：

let gulp = require('gulp'); let fileInclude = require('gulp-file-include');gulp.task('fileInclude', function() {gulp.src(['src/*.html'])//主文件.pipe(fileInclude({prefix: '@@',//變量前綴 @@includebasepath: '@file',//引用文件路徑indent: false //保留文件的縮進})).pipe(gulp.dest('dist'));//輸出文件路徑 });

3）新建頁面源碼文件src，基本的目錄結構如下：

head.html

hrader.html

footer.html

<div>這是footer部分</div>

home.html

<!DOCTYPE html> <html lang="en"><head>@@include('template/head.html', {"title": "gulp-pc-demo", "cssList": ["home.css"], "jsList": [], "keywords":"關鍵詞", "description":"描述"})</head><body>@@include('template/header.html')<div>hello</div>@@include('template/footer.html')</body> </html>

4）運行

gulp fileInclude

gulp進階配置（真正項目配置）

鏈接： https://www.kancloud.cn/return18/a-009/1278801

頁面開發技巧：

頁面樣式：

導航條：

導航條是主要的引用內容，但是一般當前頁面的導航都會有選中效果，那么就要使用 gulp-file-include 的判斷功能。后臺模板統一引入后也要考慮鏈接的選中問題。之前公司在用后臺模板的時候就遇到過這個問題。其實無論是后臺還是前臺，在引入導航條這個問題上的解決方法差不多，都是在當前頁面定義一個私有變量，通過這個變量來設置鏈接的選中效果，而 gulp-file-include 的變量通過傳參實現。具體方法如下：
index.html

<!DOCTYPE html> <html><body>@@include('./navbar.html',{"index": "active"})</body> </html>

navbar.html

編譯結果：

<!DOCTYPE html> <html><body><ul class="navbar"><li class="active" ><a href="index.html">首頁</a></li><li ><a href="about.html">關于</a></li><li ><a href="contact.html">聯系我們</a></li></ul></body> </html>

面包屑：

面包屑也是常用的功能，不過有些時候并不需要前端構建的方式生成，在此作為一個案例來說明吧。生成面包屑的方法很多，我使用了傳參的方法，通過傳遞一個導航路徑數組，然后循環生成面包屑。因為面包屑的最后一項沒有連接，所以循環要分兩次執行。具體方法如下：
index.html

<!DOCTYPE html> <html><body>@@include('./breadcrumb.html',{"title":"首頁","breadcrumb":[{"url":"...","text":"首頁"},{"url":"...","text":"鏈接一"},{"url":"","text":"鏈接二"}]})</body> </html>

breadcrumb.html

<div class="page-header"><h2>@@title</h2><ol class="breadcrumb">@@for (var i = 0; i < (context.breadcrumb.length-1); i++) {<li><a href="`+context.breadcrumb[i].url+`">`+context.breadcrumb[i].text+`</a></li>}@@for (var i = (context.breadcrumb.length-1); i < context.breadcrumb.length; i++) {<li><strong>`+context.breadcrumb[i].text+`</strong></li> }</ol> </div>