上篇文章寫(xiě)完后，有一些同學(xué)反應(yīng)有些東西沒(méi)有說(shuō)清楚辑舷，所以我決定抽點(diǎn)時(shí)間把這個(gè)工具寫(xiě)的詳細(xì)一點(diǎn)
描述
這是一個(gè)是針對(duì)于頁(yè)面比較繁多的非單頁(yè)面應(yīng)用的官網(wǎng)開(kāi)發(fā)腳手架。打包工具使用的是gulp敌蜂，還用到了require引入資源的方式拾枣，樣式編寫(xiě)時(shí)用的less庆械，頁(yè)面的模板和后臺(tái)的交互顯示是使用的art-template（下面有詳細(xì)描述這個(gè)插件）
項(xiàng)目地址
如何使用
-
下載項(xiàng)目
$ git clone git@github.com:HuYuee/web-starter-kit.git -
安裝依賴
$ cd web-starter-kit && npm install -
啟動(dòng)頁(yè)面薇溃，訪問(wèn)http://localhost:3333/src/html/index.html
$ npm run start -
產(chǎn)出最終工程
$ npm run build
目錄結(jié)構(gòu)
- bin
- render.js——(在gulpfile文件中使用到)解析layout中的模板html，將完整的html產(chǎn)出到src/html中
- dist——產(chǎn)出目錄（在項(xiàng)目下運(yùn)行npm run build就可以將src下相關(guān)資源產(chǎn)出到該目錄）
- src——開(kāi)發(fā)目錄（只需在該目錄下開(kāi)發(fā)即可）
- conf——配置文件目錄
- css——由less文件生成的的css文件
- data——mock數(shù)據(jù)文件夾
- html——由layout中的html文件解析出來(lái)的最終html文件
- images——圖片文件夾
- js——js文件夾（js相關(guān)在此文件夾中開(kāi)發(fā)）
- layout——html的源文件夾（html在該文件夾中開(kāi)發(fā)）
- less——less文件夾（樣式相關(guān)的在該文件夾中開(kāi)發(fā)）
- vendor——第三方庫(kù)
- widget——公用的layout中使用的模板（模板在該文件夾中開(kāi)發(fā)）
如何新建頁(yè)面
-
新建html
在
src/layout文件夾中新建page1.html,在代碼可以引入部門(mén)公用html模板缭乘，也可以寫(xiě)自己定制的代碼沐序。這里需要明確的說(shuō)一點(diǎn)：在html中的底部會(huì)加入require引入，這里必須要寫(xiě)入頁(yè)面在require中對(duì)應(yīng)的配置名稱堕绩，比如下面的page1薄啥。如果只是測(cè)試可以拷入以下代碼：<!DOCTYPE html> <html> <head> <!-- ws: 引入公共樣式 --> {{{include '../widget/public_style'}}} <!-- we: 引入公共樣式 --> </head> <body style="visibility:hidden;"> <h1>這里是page1的內(nèi)容</h1> <a href="index.html">點(diǎn)擊回首頁(yè)</a> <!--ws: 公共Script --> {{{include '../widget/public_script'}}} <!--we: 公共Script --> <script> //通過(guò)require的方式來(lái)引入需要的js require( ['page1'], function() { }); </script> </body> </html> -
新建樣式文件
在
src/less/page文件夾中新建page1.less，在代碼中可以引入公共的less模板逛尚，也可以自己寫(xiě)。如果是測(cè)試可以拷入以下代碼：// 引入基本樣式 @import '../widget/common.less'; h1 { font-size: 25px; } -
新建js文件
在
src/js文件夾下新建page1文件夾刁愿，然后在page1文件夾下新建文件page1.js绰寞。里面可以通過(guò)require語(yǔ)法引入其他js。可以拷入以下代碼進(jìn)行測(cè)試：define(["jquery", "data", "template"], function($, d, template) { $("body").css("visibility", "visible"); }); -
配置require
在
src/conf/require.config.js中配置新加入的js和css滤钱，如下圖所示：
當(dāng)然如果你再別的方面還需要進(jìn)行增加或者修改可以到相應(yīng)的目錄下去修改觉壶，比如圖片在images中修改，第三方插件在vendor中加入件缸。
最后你可以訪問(wèn)[http://localhost:3334/src/html/page1.html
使用到的技術(shù)
- require：實(shí)現(xiàn)模塊化開(kāi)發(fā)
- mock：實(shí)現(xiàn)本地模擬服務(wù)器端返回?cái)?shù)據(jù)
- browsersync：?jiǎn)?dòng)本地瀏覽頁(yè)面铜靶，并實(shí)現(xiàn)當(dāng)源碼更改時(shí)頁(yè)面實(shí)時(shí)刷新
- art-template：使用到了html模塊化封裝，還有js模板
- gulp-autoprefixer：使用gulp-autoprefixer根據(jù)設(shè)置瀏覽器版本自動(dòng)處理瀏覽器前綴
- 圖片壓縮他炊，less轉(zhuǎn)css争剿，css和js壓縮，css生成sourcemap
