webpack和gulp使用总结

什么是前端工程化？

随着前端行业的发展，现在的前端越来越像一个大工程，从几年前前端的webPage模式(写写单页面，jquery，使用几个插件网页就建成)，到现在的webapp模式(一个完整的app软件开发)，前端可谓是经历了翻天覆地的大变化。随着web业务的日益复杂化和多元化，以前以webpage模式为主的开发模式，已经不能够满足现在的需求，那么如何做到更效率更自动化的前端软件开发，前端工程化应运而生。
我所理解的前端工程化主要应该从模块化、组件化、规范化、自动化四个方面来思考。
模块化：就是将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载。只有这样，才有多人协作的可能。
组件化：如果说模块化只是一种理论支持的话，那么把页面组件化就是一种具体实施了，组件化基于模块化，将页面分割成多个组件来拼接完成，这样更便于维护和测试。
规范化：代码规范，格式规范，目录结构规范，接口规则规范。
自动化：一些重复和繁琐的工作，可以直接交给自动化工具来完成，coder只需要简单的配置一些文件即可了。

webpack和gulp等项目构建工具

相同点：都可用于项目打包，文件压缩，文件监测等功能。

不同点：两种工具的侧重点不同，webpack主要侧重于模块的打包，适合于单页面的项目，，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。而gulp侧重于前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。