搭建web工作流实现自动化

最新推荐文章于 2024-06-11 23:53:06 发布

Acmera

最新推荐文章于 2024-06-11 23:53:06 发布

阅读量2k

点赞数

分类专栏： web工具文章标签： web开发 workflow 自动化 web工具

本文链接：https://blog.csdn.net/chenjiaxiang520/article/details/54318994

版权

本文介绍了在web开发中为何需要建立工作流以节省重复性操作的时间，并详细阐述了如何利用Gulp构建工作流，包括文件目录结构、实现的自动化功能，如LESS编译、HTML和JS压缩、图片最小化等。同时，文章还提到了通过npm初始化package.json文件以及编写gulpfile.js来定义任务。

摘要由CSDN通过智能技术生成

搭建web工作流实现自动化

一、为什么要搭建工作流？

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

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

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

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