搭建web工作流实现自动化

概述搭建web工作流实现自动化一、为什么要搭建工作流？web开发中存在很多重复性 *** 作，花费我们大量时间 使用less或者sass书写样式后需要编译成css文件对js,css,image,html文件进行压缩对项目依赖的框架进行记录管理二、使用gulp工作流开发项目的文件目录┠─dist ━━━━━━━━ 搭建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

总结

以上是内存溢出为你收集整理的搭建web工作流实现自动化全部内容，希望文章能够帮你解决搭建web工作流实现自动化所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。