【Web】前端静态页面开发小工具（WebsiteBuilderTools）
本帖最后由 Leona 于 2019-4-2 11:53 编辑# WebsiteBuilderTools
一款基于art-template模板引擎，gulp的前端网站开发构建小工具，开发支持实时热更新。
## 开发初衷
- 前后端分离是目前的一个大趋势，可能已经太多的前端没有经历前后端一起开发的日子了，但是一些老
项目还是依然需要前后端一起开发。前段时间公司要我写几个静态页面，习惯了前后端分离开发，一时间
没有框架的写静态页面感觉十分的麻烦，而且万一他们想改个什么菜单、文字或者图片的，如果只有一个
页面需要修改还好，万一它是整站都有，折腾的还是我。于是我就想，能不能搞个前端的模板引擎，既可
以实时热更新调试，也可以自动打包编译成可供后端使用的静态页面。
- 于是乎我就整理了下我想实现的效果
1. 可以自动编译我钟爱的less，并压缩为min版
2. 可以自动压缩图片
3. 可以将js自动压缩成min版
4. 可以组件化开发html，比方说头部，底部，侧边栏一个组件，或者说一个母版框架
5. 可以用npm快速构建项目
6. 开发时可以实时热更新，编辑文件保存，浏览器自动刷新页面
7. 还能配置路由，方便编写页面时的调试
8. 一些菜单、导航等的数据可以配置，方便修改
9. 最后可以将编写好的项目，直接打包扔给后端，完事
- 接着我就开始学习以下内容
1. 速成了` webpack `（最终放弃使用，可能是学艺不精，发现它打包出来的项目竟是基于js驱动的一个小站点，也就和vue类似，这完全不符合的我初衷，且我想要快，毕竟公司嘛需要的是效率）
2. 速成了` node ` （这是基础语法，node嘛，前端目前比较热门的语言，这个抽空我还是得好好学习学习）；
3. 速成` gulp ` （这是为了构建打包使用的，我也为了开发这个小工具才了解到的，原谅作为一个前端竟然才知道这玩意，简直对不起我的岗位(╥╯^╰╥)）；
4. 速成` art-templatet ` （这个是随便找的一个模板引擎，百度随便搜了下，感觉还不错的样子，觉得符合我的要求）；
5. 基于这三大块，我开始开发的我小工具了。
6. 首先，起个服务，这是必须的嘛，要调试就必要要先写个服务，于是结合` koa `写了` wbt.server.js `
7. 来个配置文件，有个服务，肯定得有打包，那这所有的东西总要有个配置文件吧，所以就整了个` wbt.config.js `
8. 接下来就是打包了，这个就用到了我速成的` gulp ` ，简单编写了` gulpfile.js `，说来这个工具真心不错，简单，快速，方便。而且插件也超级丰富。唯一不足的就是` art-templatet `编译插件并不足以满足我的要求，所以我就把` gulp-art `这个插件捣鼓下来修改了下，就有了` gulp-art.js `
9. 最后的我的小工具就弄好了，说来服务那里写的麻烦了点，为了实时编译，我在` gulpfile.js `里面又代{过}{滤}理了一次，这样就整个两个服务。原谅小女子学艺不精，等我把速成变成熟悉的时候我再来完善吧！
## 使用指南
- 将(https://github.com/qc-web-y/WebsiteBuilderTools)下载保存到本地
- 使用 npm 安装依赖： `npm i`
- 项目开发测试运行： `npm run dev` （需要实时热更新运行：`npm run dev:hot`）
- 项目打包输出运行：`npm run build`
- 开始编辑，.art文件语法请参考
## 目录说明
```
> -- src // 开发目录
> -- assets // 静态资源存放
> -- images // 图片
> -- scripts // javascript
> -- styles // CSS、less、sass等样式
> -- component// art部分视图存放
> -- data // 测试数据存放
> -- views // art模板视图存放
> -- dist // 静态页面打包输出目录
> -- config // 配置目录
> -- wbt.config.js // 主要配置文件
> -- wbt.route.js // 路由配置文件
> -- wbt.server.js // 开发测试服务器配置文件
> -- gulp-art.js // gulp插件，用于编译art模板文件为html
> -- .gulpfile.js // gulp配置
> -- .gitignore
> -- package.json
> -- package-lock.json
> -- README.md
```
## 配置文档
> wbt.config.js （主要配置）
- artTemplate： 模板引擎选项配置，参考[官方文档]
- fileList： 文件清单，填写相对于`src`开发目录的路径，如：
```
{
art: 'views', // 表示 art 模板文件所在目录指向：src/views
img: 'assets/images', // 表示图片文件所在目录指向：src/assets/images
}
```
- output： 输出配置
```
{
file: path.join('dist') // 打包输出的文件路径，使用相对路径
}
```
- devServer： 开发服务配置
```
{
host: 'localhost',
port: '8084'
}
```
> wbt.route.js （路由配置）
```
const shareData = require('../src/data/share');
const appMainRoute = [
{
// 路由路径
path: '/',
// art模板文件名，默认查找wbt.config.js中设置的art文件指向目录中的art文件
name: 'home',
// art模板使用数据，自行require
data: shareData
}
];
```
## 项目下载
感谢发布原创作品，吾爱破解论坛因你更精彩！ 谢谢分享 🐂 给你点个赞 厉害了。。。 正在学习前端，很不错的源码，学习下
感谢发布原创作品，吾爱破解论坛因你更精彩！ 厉害了 ！！！ 功能有点强大哦 小姐姐从事前端多久了
页:
[1]
2