前端构建小工具

前言

  因公司项目需要，目前主要工作是在原有基础上不断的新增一些页面因为vue、react等框架虽然很好用，但是借助webpack才是他们最好的实现方式，而webpack需要在每次代码修改后重新打包上传，非常不利于我们当前的项目开发需求，所以目前项目使用html + jquery 可能是最佳的开发方式。
  通常接到一个新的需求，前端需要创建基础的文件的结构，然后开发调试，最终打包发送个后台开发人员。后台用模板渲染数据。但是每次创建一个这样的目录结构是需要花费很多的时间的,如下我们需要创建至少3个目录3个文件。还要为每个html 页面写必要的 标签，这部分工作所以我觉得，应该为这些繁琐的工作找到一个简单的办法。

|----index.html
|----images/
|----js/
      |-index.js
|----css/
      |-index.css

选择构建工具

fis

  优点：可以全局安装插件，对于目前我们的项目使用会很方便。
  缺点：fis3插件数量有限，版本更新停滞，目前最高依然在使用node 6.x的版本,而母亲目前流行的新框架通常都会有更高的版本，如果使用fis，我们可能需要不断的切换电脑上的node版本。

gulp

  优点：配置非常简单，目前已有非常多的插件可以选用，灵活性很高，功能很丰富。
  缺点：不能全局安装插件，所有依赖的插件都需要在当前项目中安装。

目前实现的功能

针对项目结构

• 一键创建目录结构（创建的目录可配置文件名）
• 监听页面改动，自动刷新

html

• 分离公共组件header，footer
• 针对移动端和pc端使用不同的头部
• 代码格式化

css

• 编译scss文件
• 语法检查
• 自动添加兼容性前缀
• 自动页头添加注释
• 属性名排序
• rem值转化
• 背景中小于8kb的图片，转换为base64格式
  -utils工具类官方文档

/* 编译前 */
// 通过定位，水平、垂直居中
.foo {
    top: center;
    left: center;
}
// flex 子元素居中
.center {
    @util center;
}
.center-block {
    @util center-block;
}

// 文本超出...
.trunc {
    @util truncate; 
}
//  多行文本超出...
.trunc-multiline {
    @util truncate(3, 1.5);
    float: left;
}
// 画圆
.circle {
    border: 3px;
    @util circle(354em, lime);
}
// 三角
.tri-up {
    @util triangle(30px, red, up); //  up down left right up-right up-left down-right down-left
}

/* 编译后 */
.foo {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}
.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.trunc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trunc-multiline {
    display: block;
    display: -webkit-box;
    height: 4.5em;
    line-height: 1.5;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    float: left;
}
.tri-up {
    height: 0;
    width: 0;
    border-bottom: 30px solid red;
    border-right: 30px solid transparent;
    border-left: 30px solid transparent;
}

• 一行代码实现动画

1. animation.css
2. magic.css
3. mimic.css
4. tuesday.css

• lostGird
  详细使用方法参见官方文档lostGird
• 属性名称简写

@alias {
  fs: font-size;
  fw: font-weight;
}
.a{
  fs:14px;
  fw:bold；
}

js

• 自动页头添加注释

img:

• 图片压缩

项目文件

• 备份开发目录
• 备份build目录
• 导出压缩文件包
• 保存build至svn目录下

未来我期望实现的功能

1. 一键引入插件并实现自动合并到项目中