WebsiteBuilderTools前端靜態頁面開發小工具

WebsiteBuilderTools前端靜態頁面開發小工具，一款基于art-template模板引擎，gulp的前端網站開發構建小工具，使用開發環境加載即可生成目錄，幫助你快速構建站內框架，節省不少整理時間。本次放出WebsiteBuilderTools小工具資源免費下載，有相關網頁前端開發使用需求的朋友們不妨試試吧！

WebsiteBuilderTools工具介紹：

前后端分離是目前的一個大趨勢，可能已經太多的前端沒有經歷前后端一起開發的日子了，但是一些老

項目還是依然需要前后端一起開發。前段時間公司要我寫幾個靜態頁面，習慣了前后端分離開發，一時間

沒有框架的寫靜態頁面感覺十分的麻煩，而且萬一他們想改個什么菜單、文字或者圖片的，如果只有一個

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

以實時熱更新調試，也可以自動打包編譯成可供后端使用的靜態頁面。

于是乎我就整理了下我想實現的效果

可以自動編譯我鐘愛的less，并壓縮為min版

可以自動壓縮圖片

可以將js自動壓縮成min版

可以組件化開發html，比方說頭部，底部，側邊欄一個組件，或者說一個母版框架

可以用npm快速構建項目

開發時可以實時熱更新，編輯文件保存，瀏覽器自動刷新頁面

還能配置路由，方便編寫頁面時的調試

一些菜單、導航等的數據可以配置，方便修改

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

接著我就開始學習以下內容

速成了webpack（最終放棄使用，可能是學藝不精，發現它打包出來的項目竟是基于js驅動的一個小站點，也就和vue類似，這完全不符合的我初衷，且我想要快，畢竟公司嘛需要的是效率）

速成了node （這是基礎語法，node嘛，前端目前比較熱門的語言，這個抽空我還是得好好學習學習）；

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

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

基于這三大塊，我開始開發的我小工具了。

首先，起個服務，這是必須的嘛，要調試就必要要先寫個服務，于是結合koa寫了wbt.server.js

來個配置文件，有個服務，肯定得有打包，那這所有的東西總要有個配置文件吧，所以就整了個wbt.config.js

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

最后的我的小工具就弄好了，說來服務那里寫的麻煩了點，為了實時編譯，我在gulpfile.js里面又代{過}{濾}理了一次，這樣就整個兩個服務。原諒小女子學藝不精，等我把速成變成熟悉的時候我再來完善吧！

WebsiteBuilderTools使用：

將WebsiteBuilderTools項目下載保存到本地

使用 npm 安裝依賴： npm i

項目開發測試運行： npm run dev （需要實時熱更新運行：npm run dev:hot）

項目打包輸出運行：npm run build

開始編輯，.art文件語法請參考 [art-template模板引擎官網文檔]

wbt.config.js （主要配置）

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

fileList： 文件清單，填寫相對于src開發目錄的路徑，如：

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

output： 輸出配置

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

devServer： 開發服務配置

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

前端開發工具相關視頻：