本帖最后由 Leona 于 2019-4-2 11:53 编辑
一款基于art-template模板引擎，gulp的前端网站开发构建小工具，开发支持实时热更新。
开发初衷
- 前后端分离是目前的一个大趋势，可能已经太多的前端没有经历前后端一起开发的日子了，但是一些老
项目还是依然需要前后端一起开发。前段时间公司要我写几个静态页面，习惯了前后端分离开发，一时间
没有框架的写静态页面感觉十分的麻烦，而且万一他们想改个什么菜单、文字或者图片的，如果只有一个
页面需要修改还好，万一它是整站都有，折腾的还是我。于是我就想，能不能搞个前端的模板引擎，既可
以实时热更新调试，也可以自动打包编译成可供后端使用的静态页面。
-
于是乎我就整理了下我想实现的效果
- 可以自动编译我钟爱的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项目下载保存到本地
- 使用 npm 安装依赖：
npm i
- 项目开发测试运行：
npm run dev （需要实时热更新运行：npm run dev:hot）
- 项目打包输出运行：
npm run build
- 开始编辑，.art文件语法请参考 [art-template模板引擎官网文档]
目录说明
> -- 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： [art-template]模板引擎选项配置，参考[官方文档]
-
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
}
];
项目下载
WebsiteBuilderTools.7z
(82.44 KB, 下载次数: 80)
| 
[复制链接]
发表于 2019-4-2 11:51
