Webpack和Gulp使用体会


不要被工具驱动,它只是你手中用来提高效率的工具

在项目中第一次使用Gulp,有种爽快的感觉

在简单配置了一些task后,gulp为我们的项目完成了一下工作:

  • 将小图标合成雪碧图,配置后自动化调用
  • 压缩JS,CSS代码
  • 检查JS语法错误
  • 预编译Sass
  • 引入mock数据

这无疑大大提高了我们的工作效率,像是我们的用配置文件给Gulp一些信息,它便按照这些信息给我们规划了工作流程,我们只需要根据这个流程编写代码,一切显得十分有序。

Webpack

依然是手动配置一些文件,但在webpack中模块化的概念被十分重视。
通过loader,使得一切的资源形式都能被视作模块,ES6模块,图片,json,sass等等,都被视作模块,按需异步加载。

详细的区别

Gulp侧重于前端开发的 整个过程 的控制管理(像是流水线),我们可以通过给gulp配置不通的task(通过Gulp中的gulp.task()方法配置,比如启动server、sass/less预编译、文件的合并压缩等等)来让gulp实现不同的功能,从而构建整个前端开发流程。

Webpack有人也称之为 模块打包机 ,由此也可以看出Webpack更侧重于模块打包,当然我们可以把开发中的所有资源(图片、js文件、css文件等)都可以看成模块,最初Webpack本身就是为前端JS代码打包而设计的,后来被扩展到其他资源的打包处理。Webpack是通过loader(加载器)和plugins(插件)对资源进行处理的。

总结呢:gulp是一个工具,它可以引入各种插件来优化你的项目流程,实现各种功能,甚至引入webpack,最终的目的是用一个工具使得自己要手动做的自动来执行,优化你的项目流程。
而webpack是一个前端模块化的方案,采用预编译,不需要再浏览器中加载解释器,打包文件多个入口,一个出口。它模块化的理念十分适合react,适合单页面应用(SPA)。

声明:高翔的博客|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - Webpack和Gulp使用体会


大家好:我是练习时常两年半的前端练习生