前言
因公司项目需要，目前主要工作是在原有基础上不断的新增一些页面因为vue、react等框架虽然很好用，但是借助webpack才是他们最好的实现方式，而webpack需要在每次代码修改后重新打包上传，非常不利于我们当前的项目开发需求，所以目前项目使用html + jquery 可能是最佳的开发方式。
通常接到一个新的需求，前端需要创建基础的文件的结构，然后开发调试，最终打包发送个后台开发人员。后台用模板渲染数据。但是每次创建一个这样的目录结构是需要花费很多的时间的,如下我们需要创建至少3个目录3个文件。还要为每个html 页面写必要的<html> <body>标签，这部分工作所以我觉得，应该为这些繁琐的工作找到一个简单的办法。
|----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;
}
- 一行代码实现动画
- lostGird
详细使用方法参见官方文档lostGird - 属性名称简写
@alias {
fs: font-size;
fw: font-weight;
}
.a{
fs:14px;
fw:bold；
}
js
- 自动页头添加注释
img:
- 图片压缩
项目文件
- 备份开发目录
- 备份build目录
- 导出压缩文件包
- 保存build至svn目录下
未来我期望实现的功能
- 一键引入插件并实现自动合并到项目中
