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'}

前端开发工具相关视频：