WebsiteBuilderTools前端靜態(tài)頁(yè)面開(kāi)發(fā)小工具

WebsiteBuilderTools前端靜態(tài)頁(yè)面開(kāi)發(fā)小工具，一款基于art-template模板引擎，gulp的前端網(wǎng)站開(kāi)發(fā)構(gòu)建小工具，使用開(kāi)發(fā)環(huán)境加載即可生成目錄，幫助你快速構(gòu)建站內(nèi)框架，節(jié)省不少整理時(shí)間。本次放出WebsiteBuilderTools小工具資源免費(fèi)下載，有相關(guān)網(wǎng)頁(yè)前端開(kāi)發(fā)使用需求的朋友們不妨試試吧！

WebsiteBuilderTools工具介紹：

前后端分離是目前的一個(gè)大趨勢(shì)，可能已經(jīng)太多的前端沒(méi)有經(jīng)歷前后端一起開(kāi)發(fā)的日子了，但是一些老

項(xiàng)目還是依然需要前后端一起開(kāi)發(fā)。前段時(shí)間公司要我寫幾個(gè)靜態(tài)頁(yè)面，習(xí)慣了前后端分離開(kāi)發(fā)，一時(shí)間

沒(méi)有框架的寫靜態(tài)頁(yè)面感覺(jué)十分的麻煩，而且萬(wàn)一他們想改個(gè)什么菜單、文字或者圖片的，如果只有一個(gè)

頁(yè)面需要修改還好，萬(wàn)一它是整站都有，折騰的還是我。于是我就想，能不能搞個(gè)前端的模板引擎，既可

以實(shí)時(shí)熱更新調(diào)試，也可以自動(dòng)打包編譯成可供后端使用的靜態(tài)頁(yè)面。

于是乎我就整理了下我想實(shí)現(xiàn)的效果

可以自動(dòng)編譯我鐘愛(ài)的less，并壓縮為min版

可以自動(dòng)壓縮圖片

可以將js自動(dòng)壓縮成min版

可以組件化開(kāi)發(fā)html，比方說(shuō)頭部，底部，側(cè)邊欄一個(gè)組件，或者說(shuō)一個(gè)母版框架

可以用npm快速構(gòu)建項(xiàng)目

開(kāi)發(fā)時(shí)可以實(shí)時(shí)熱更新，編輯文件保存，瀏覽器自動(dòng)刷新頁(yè)面

還能配置路由，方便編寫頁(yè)面時(shí)的調(diào)試

一些菜單、導(dǎo)航等的數(shù)據(jù)可以配置，方便修改

最后可以將編寫好的項(xiàng)目，直接打包扔給后端，完事

接著我就開(kāi)始學(xué)習(xí)以下內(nèi)容

速成了webpack（最終放棄使用，可能是學(xué)藝不精，發(fā)現(xiàn)它打包出來(lái)的項(xiàng)目竟是基于js驅(qū)動(dòng)的一個(gè)小站點(diǎn)，也就和vue類似，這完全不符合的我初衷，且我想要快，畢竟公司嘛需要的是效率）

速成了node （這是基礎(chǔ)語(yǔ)法，node嘛，前端目前比較熱門的語(yǔ)言，這個(gè)抽空我還是得好好學(xué)習(xí)學(xué)習(xí)）；

速成gulp （這是為了構(gòu)建打包使用的，我也為了開(kāi)發(fā)這個(gè)小工具才了解到的，原諒作為一個(gè)前端竟然才知道這玩意，簡(jiǎn)直對(duì)不起我的崗位(╥╯^╰╥)）；

速成art-templatet （這個(gè)是隨便找的一個(gè)模板引擎，百度隨便搜了下，感覺(jué)還不錯(cuò)的樣子，覺(jué)得符合我的要求）；

基于這三大塊，我開(kāi)始開(kāi)發(fā)的我小工具了。

首先，起個(gè)服務(wù)，這是必須的嘛，要調(diào)試就必要要先寫個(gè)服務(wù)，于是結(jié)合koa寫了wbt.server.js

來(lái)個(gè)配置文件，有個(gè)服務(wù)，肯定得有打包，那這所有的東西總要有個(gè)配置文件吧，所以就整了個(gè)wbt.config.js

接下來(lái)就是打包了，這個(gè)就用到了我速成的gulp ，簡(jiǎn)單編寫了gulpfile.js，說(shuō)來(lái)這個(gè)工具真心不錯(cuò)，簡(jiǎn)單，快速，方便。而且插件也超級(jí)豐富。唯一不足的就是art-templatet編譯插件并不足以滿足我的要求，所以我就把gulp-art這個(gè)插件搗鼓下來(lái)修改了下，就有了gulp-art.js

最后的我的小工具就弄好了，說(shuō)來(lái)服務(wù)那里寫的麻煩了點(diǎn)，為了實(shí)時(shí)編譯，我在gulpfile.js里面又代{過(guò)}{濾}理了一次，這樣就整個(gè)兩個(gè)服務(wù)。原諒小女子學(xué)藝不精，等我把速成變成熟悉的時(shí)候我再來(lái)完善吧！

WebsiteBuilderTools使用：

將WebsiteBuilderTools項(xiàng)目下載保存到本地

使用 npm 安裝依賴： npm i

項(xiàng)目開(kāi)發(fā)測(cè)試運(yùn)行： npm run dev （需要實(shí)時(shí)熱更新運(yùn)行：npm run dev:hot）

項(xiàng)目打包輸出運(yùn)行：npm run build

開(kāi)始編輯，.art文件語(yǔ)法請(qǐng)參考 [art-template模板引擎官網(wǎng)文檔]

wbt.config.js （主要配置）

artTemplate： [art-template]模板引擎選項(xiàng)配置，參考[官方文檔]

fileList： 文件清單，填寫相對(duì)于src開(kāi)發(fā)目錄的路徑，如：

{ art: 'views', // 表示 art 模板文件所在目錄指向：src/viewsimg: 'assets/images', // 表示圖片文件所在目錄指向：src/assets/images}

output： 輸出配置

{file: path.join('dist') // 打包輸出的文件路徑，使用相對(duì)路徑 }

devServer： 開(kāi)發(fā)服務(wù)配置

{host: 'localhost', port: '8084'}

前端開(kāi)發(fā)工具相關(guān)視頻：