• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

tio-webpack: 传统前端的webpack,专门为传统前端开发的编译、压缩、打包工具,极大极 ...

原作者: [db:作者] 来自: 网络 收藏 邀请

tio-webpack

传统前端的webpack,专门为传统前端开发的编译、压缩、打包工具,极大极大提升开发效率输入图片说明

使用场景

  • html代码段复用常见的开发场景如header.html + xxx.html + foot.html ==> allXxx.html

  • html,css,js代码编译压缩合并

  • 为还处在开发期的html,css,js提供实时运行效果

效果预览

以下截图,左侧为开发人员视图,右侧为实际运行后的视图

输入图片说明

输入图片说明

输入图片说明

输入图片说明

输入图片说明

输入图片说明

输入图片说明

使用方法

  • 下载代码https://gitee.com/tywo45/tio-webpack

  • 找到release/config/app-env.properties把里面的http.page值配成你的网页目录把build.to值配成你的打包后的目录

  • 运行

    1、双击release/run.bat

    2、访问http://127.0.0.1:10150,便可访问你的网页了

  • 打包

    1、双击release/dist.bat

    2、生成的文件会在build.to指定的目录中

一分钟掌语法

如果你已经会使用freemarker,这一分钟都可以省掉啦,因为tio-webpack的语法和freemarker一模一样的,如果你不会freemarker,只需要掌握下面两个指令即可完成相当不错的功能

1. include指令

<#include "/js/app/a.js">

2. if指令

<#if console.log == true >    var log = console.log.bind(console);<#else>    var log = function () { }; </#if>

大家先可以关注一下该项目的母项目:t-io不仅仅是百万级即时通讯框架,等有空了,给大家整个样例工程,这样学起来快


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
maple_engine: Maple 编译器和引擎发布时间:2022-02-13
下一篇:
TpAndVue: ThinkPHP 5.1 + Vue 自动化构建解决方案发布时间:2022-02-13
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap