搭建web工作流实现自动化

1、为何要搭建工作流？

• web开发中存在很多重复性操作，花费我们大量时间
  
  • 使用less或sass书写样式后需要编译成css文件
  • 对js,css,image,html文件进行紧缩
  • 对项目依赖的框架进行记录管理

2、使用gulp工作流开发项目的文件目录

┠─dist ━━━━━━━━━━━━━┱─images
(项目上线代码)                  ┠─styles
                              ┠─scripts
                              ┖─index.html
┠─src  ━━━━━━━━━━━━━┱─images
(项陌生产源码)                  ┠─styles
                              ┠─scripts
                              ┖─index.html 

┠─node_modules(bower_components) (存储了项目所需要的包)
┠─gulpfile.js (控制工作流的js文件)
┠─package.json （记录项目的版本，名称，主文件，开发依赖，和生产依赖）
┖─README.md (项目的说明和帮助文档)

• Node的gulp包来构建web工作流，将控制工作流代码放置在gulpfile.js文件中
• pakage.json记录了开发该项目的开发依赖工具包，和生产阶段依赖工具包
• src是我们开发时候编写代码的文件夹，dist文件夹是由工作流自动映照src生成的，其中对
  src中的文件进行紧缩，混淆，等1系列操作

3、搭建的工作流实现了哪些自动化

1.gulp工具搭建:

• 使用任务的情势将以下流程抽象成1个js文件，
• 自动监听源码文件的变化产出目标文件，
• 并且实现阅读器同步

2.实现的功能:

• less文件

  • 编译：gulp-less
  • 合并：gulp-concat
  • 紧缩：gulp-minify-css

• html

  • 紧缩：gulp-minify-html

• image

  • 最小化图象：gulp-imagemin

• js

  • 合并：gulp-concat
  • 混淆： gulp-uglify

4、工作流搭建

• 创建文件目录：
  
  • package.json文件是通过npm init 创建，创建时候填入信息
  • 其他文件或目录直接创建便可
• 编写gulpfile.js文件
  
  • 创建less任务
  • 创建image任务
  • 创建js任务
  • 创建html任务
  • 创建主任务，依赖以上任务履行，监听src里面的文件，当文件变化代用以上任务

github上面workflow