前後端分離開發腳手架

HuYuee發表於2019-02-21
後端

上篇文章寫完後，有一些同學反應有些東西沒有說清楚，所以我決定抽點時間把這個工具寫的詳細一點

描述

這是一個是針對於頁面比較繁多的非單頁面應用的官網開發腳手架。打包工具使用的是gulp，還用到了require引入資源的方式，樣式編寫時用的less，頁面的模板和後臺的互動顯示是使用的art-template（下面有詳細描述這個外掛）
專案地址

如何使用

  1. 下載專案
$ git clone git@github.com:HuYuee/web-starter-kit.git複製程式碼
  1. 安裝依賴
$ cd web-starter-kit && npm install複製程式碼
  1. 啟動頁面，訪問http://localhost:3333/src/html/index.html
$ npm run start複製程式碼
  1. 產出最終工程
$ npm run build複製程式碼

目錄結構

  • bin
  • render.js——(在gulpfile檔案中使用到)解析layout中的模板html，將完整的html產出到src/html中
  • dist——產出目錄（在專案下執行npm run build就可以將src下相關資源產出到該目錄）
  • src——開發目錄（只需在該目錄下開發即可）
  • conf——配置檔案目錄
  • css——由less檔案生成的的css檔案
  • data——mock資料資料夾
  • html——由layout中的html檔案解析出來的最終html檔案
  • images——圖片資料夾
  • js——js資料夾（js相關在此資料夾中開發）
  • layout——html的原始檔夾（html在該資料夾中開發）
  • less——less資料夾（樣式相關的在該資料夾中開發）
  • vendor——第三方庫
  • widget——公用的layout中使用的模板（模板在該資料夾中開發）

如何新建頁面

  1. 新建html

在src/layout資料夾中新建page1.html,在程式碼可以引入部門公用html模板，也可以寫自己定製的程式碼。這裡需要明確的說一點：在html中的底部會加入require引入，這裡必須要寫入頁面在require中對應的配置名稱，比如下面的page1。如果只是測試可以拷入以下程式碼：

<!DOCTYPE html>
<html>
<head>
<!-- ws: 引入公共樣式 -->
{{{include `../widget/public_style`}}}
<!-- we: 引入公共樣式 -->
</head>
<body style="visibility:hidden;">
<h1>這裡是page1的內容</h1>
<a href="index.html">點選回首頁</a>
<!--ws: 公共Script -->
{{{include `../widget/public_script`}}}
<!--we: 公共Script -->
<script>
//通過require的方式來引入需要的js
require( [`page1`], function() {
});
</script>
</body>
</html>複製程式碼
  1. 新建樣式檔案

在src/less/page資料夾中新建page1.less，在程式碼中可以引入公共的less模板，也可以自己寫。如果是測試可以拷入以下程式碼：

// 引入基本樣式
@import `../widget/common.less`;

h1 {
font-size: 25px;
}複製程式碼
  1. 新建js檔案

在src/js資料夾下新建page1資料夾，然後在page1資料夾下新建檔案page1.js。裡面可以通過require語法引入其他js。可以拷入以下程式碼進行測試：

define(["jquery", "data", "template"], function($, d, template) {
$("body").css("visibility", "visible");

});複製程式碼
  1. 配置require

在src/conf/require.config.js中配置新加入的js和css，如下圖所示：

image.png
image.png

  1. 當然如果你再別的方面還需要進行增加或者修改可以到相應的目錄下去修改，比如圖片在images中修改，第三方外掛在vendor中加入。

  2. 最後你可以訪問[http://localhost:3334/src/html/page1.html

使用到的技術

  • require：實現模組化開發
  • mock：實現本地模擬伺服器端返回資料
  • browsersync：啟動本地瀏覽頁面，並實現當原始碼更改時頁面實時重新整理
  • art-template：使用到了html模組化封裝，還有js模板
  • gulp-autoprefixer：使用gulp-autoprefixer根據設定瀏覽器版本自動處理瀏覽器字首
  • 圖片壓縮，less轉css，css和js壓縮，css生成sourcemap

相關文章