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. 点击窗口下方“添加新网站”，即可在窗口右侧配置并添加新网站

   

   
   

2. 配置自动刷新：

   

   
   

3. less支持

   less示例:

   
   

4. 打包配置（注意：不要将打包目录放在项目目录下。注意：打包非必须）