本文将简单介绍一下前端的自动化工作流,在我们前端的日常开发过程中,有很多无用的流程,傻傻的重复性的操作,我们作为一个有追求的程序员应该将我们的精力集中在代码的业务逻辑上,而那些重复性的操作就交给工具来完成就行了。
我们的整个工作流程可以总结为以下 7 点:

序号 流程 重复性操作 对应工具
1 搭建项目结构 y 脚手架如(vue-cli)
2 下载依赖框架 y 包管理器(npm,Bower)
3 coding 业务逻辑(开发过程) n 程序员
4 协同开发 y git svn
5 调试 n 程序员
6 优化性能(压缩 混淆) y 构建工具
7 上线 y git ftp
  • 这里说的工具就理解为软件,只不过大都没有图形化界面,而是命令行工具
  • 脚手架工具会帮助我们搭建一个项目结构,一般大型公司都有自己的脚手架
  • vue-cli 脚手架为例子, 通过 npm 安装 npm install vue-cli -g 查看命令帮助 vue 查看可用的模板:vue list 基于某一个模板来创建: vue init webpack-simple demo
    pic
    vue-cli脚手架创建目录
  • 下图是基于 webpack 创建的目录结构
    pic
    webpack
  • 有时间研究下:Bower、Grunt、Gulp、Yeoman