构建工具有什么用？我写前端代码没有这些工具也可以工作啊。？？？？
说简单点, 就是 自动化, 再直白一点就是可以 偷懒.
当你的文件足够多的时候, 你就可能会想 拆分文件为单个的模块, 然后在发布的时候, 对拆分后的各模块进行合并, 再根据优化规则, 尽量减小文件大小, 这时候又需要对文件进行压缩之类的操作.
而这些构建工具,就是帮助你通过配置或者编写约定好的代码, 来自动完成你上面的这些功能的一个 工具.
。。你的代码压缩不？ 有ｍｄ５ 后缀不？能一键发布到服务器不？。。需不需要雪碧图？需不需要反向代理服务器？ 用不用ｊａｄｅ, ｃｏｆｆｅｅ？
webpack
图中不难看出，webpack能够帮你把别人写好的模块整合到一起，而不用你手动的复制代码到你正在写的代码文件。
教程可以看webpack官网
gulp
gulp是一款可以帮你自动化管理你的前端项目工具，比如当你写了一个sass文件，gulp自动监视到你文件改动，自动帮你转换css然后移动到访问目录，它还可以做自动化测试等等，看这里你就明白了：gulp中文网
附送一篇小文章：gulp的几个重要API