先後端分離開發腳手架

時間 2019-11-17

標籤後端分離開發腳手架简体版

原文原文鏈接

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

描述

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

如何使用

下載項目

$ git clone git@github.com:HuYuee/web-starter-kit.git複製代碼

安裝依賴

$ cd web-starter-kit && npm install複製代碼

啓動頁面，訪問http://localhost:3333/src/html/index.html

$ npm run start複製代碼

產出最終工程

$ 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中使用的模板（模板在該文件夾中開發）

如何新建頁面

新建html

在src/layout文件夾中新建page1.html,在代碼能夠引入部門公用html模板，也能夠寫本身定製的代碼。這裏須要明確的說一點：在html中的底部會加入require引入，這裏必需要寫入頁面在require中對應的配置名稱，好比下面的page1。若是隻是測試能夠拷入如下代碼：html

<!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>複製代碼

新建樣式文件

在src/less/page文件夾中新建page1.less，在代碼中能夠引入公共的less模板，也能夠本身寫。若是是測試能夠拷入如下代碼：java

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

h1 {
font-size: 25px;
}複製代碼

新建js文件

在src/js文件夾下新建page1文件夾，而後在page1文件夾下新建文件page1.js。裏面能夠經過require語法引入其餘js。能夠拷入如下代碼進行測試：jquery

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

});複製代碼

配置require

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

固然若是你再別的方面還須要進行增長或者修改能夠到相應的目錄下去修改，好比圖片在images中修改，第三方插件在vendor中加入。github
最後你能夠訪問[http://localhost:3334/src/html/page1.htmlweb

使用到的技術

require：實現模塊化開發
mock：實現本地模擬服務器端返回數據
browsersync：啓動本地瀏覽頁面，並實現當源碼更改時頁面實時刷新
art-template：使用到了html模塊化封裝，還有js模板
gulp-autoprefixer：使用gulp-autoprefixer根據設置瀏覽器版本自動處理瀏覽器前綴
圖片壓縮，less轉css，css和js壓縮，css生成sourcemap

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。