Fet前端自动化可视工具(等同liveload自动刷新,打包,压缩,美化,less支持)
2016/07/19    标签: node    自动刷新   

Fet介绍

Fet是Front-End Tool的缩写,意思是前端工具。

做前端项目的时候,经常会配置个服务器;用less或者stylus写样式;做一个网站头部要复制N边,头部文件有变动要每个页面都改一变;不断的F5刷新;html,js,css的压缩美化,图片的压缩等等。

为了解决以上问题,自己做了个小工具和大家共享下。

当然现在已经有grunt和gulp等成熟的命令行工具;但我需要更简单一些,能更快的投入到工作中。

只加了一些目前本人常用的功能,如需要更多功能可以邮件联系我:550830233@qq.com


下载链接

链接:https://pan.baidu.com/s/1olFLzSbN9vNe-55TbKtuRw

提取码:grwu


Fet功能:

  1. 支持类似liveload的自动刷新:

    告别F5刷新;

  2. 支持随机端口配置:

    配置一个项目的时候总会想某个端口是不是已经占用了,用随机端口就不需要再考虑了,马上就能进入开发。

  3. 打包配置:

    html美化,js压缩美化(支持正则表达式匹配路径压缩,可以不压缩不要压缩的目录及js文件),css压缩美化,图片压缩

  4. less的支持:

    所有在项目/styles/目录下的文件都会被编译成css文件,然后在页面内引入即可(升级less3.0,支持.calc和function)。

  5. 目录浏览功能。

  6. 支持简单的包含:

    html文件内{include /include/header.html},打包后会替换为根目录下/include文件下的header.html的内容。

7.支持雪碧图和svg图标的合并和字体图标的生成

a.雪碧图生成:

所有在项目/images/icon/下的小图标都会被自动生成雪碧图和对应的css文件;需要将css文件 引入,然后

<span class='icon icon-home'></span>

这种方式引入;

需要hover效果,则将图片命名为:home.hover.png,

使用在层dom加上.icon-wp的样式名字

b.字体图标生成:

所有在项目/images/icone600/src下的文件都会被自动合并并输出到/images/icone600/dist

目录下。使用方法在文件夹内的html内。


Fet使用方法:

新增项目

  1. 点击窗口下方“添加新网站”,即可在窗口右侧配置并添加新网站

    newItem.gif


  2. 配置自动刷新:

    liveload.gif


  3. less支持

    less示例:jdfw.gif


  4. 打包配置(注意:不要将打包目录放在项目目录下。注意:打包非必须)

    package.gif