描述
這是一個是針對於頁面比較繁多的非單頁面應用的官網開發腳手架。打包工具使用的是gulp，還用到了require引入資源的方式，樣式編寫時用的less，頁面的模板和后台的交互顯示是使用的art-template（下面有詳細描述這個插件）
項目地址
如何使用
-
下載項目
$ 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。如果只是測試可以拷入以下代碼：<!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模板，也可以自己寫。如果是測試可以拷入以下代碼：// 引入基本樣式 @import '../widget/common.less'; h1 { font-size: 25px; } -
新建js文件
在
src/js文件夾下新建page1文件夾，然后在page1文件夾下新建文件page1.js。里面可以通過require語法引入其他js。可以拷入以下代碼進行測試：define(["jquery", "data", "template"], function($, d, template) { $("body").css("visibility", "visible"); }); -
配置require
在
src/conf/require.config.js中配置新加入的js和css，如下圖所示：
-
當然如果你再別的方面還需要進行增加或者修改可以到相應的目錄下去修改，比如圖片在images中修改，第三方插件在vendor中加入。
使用到的技術
- require：實現模塊化開發
- mock：實現本地模擬服務器端返回數據
- browsersync：啟動本地瀏覽頁面，並實現當源碼更改時頁面實時刷新
- art-template：使用到了html模塊化封裝，還有js模板
- gulp-autoprefixer：使用gulp-autoprefixer根據設置瀏覽器版本自動處理瀏覽器前綴
- 圖片壓縮，less轉css，css和js壓縮，css生成sourcemap