postpass 构建工具Gulp/Webpack – 个人博客

构建工具Gulp/Webpack

构建工具作用

构建工具的作用就是将源代码转化成可执行的代码。如转换 javaScript、css、html等。在转换的过程中包含以下功能

  • 将代码转换成能在浏览器中可执行的代码(es6、sass、less 等)
  • 进行代码和页面级别、资源级别的优化(压缩、混淆、合并、缓存等)
  • 进行代码分割和模块合并、规范校验等工作(提取页面公共代码等)
  • 进行开发热更新、区分环境自动发布等

实际上就是工程化、自动化的思想。将手动的流程用工具自动的解决一系列复杂的操作,解放生产力。

1、Gulp

gulp可以进行js,html,css,img的压缩打包,是自动化构建工具,可以将多个js文件或是css压缩成一个文件,并且可以压缩为一行,以此来减少文件体积,加快请求速度和减少请求次数;并且gulp有task定义处理事务,从而构建整体流程,它是基于流的自动化构建工具。

2、Webpack

Webpack是前端构建工具,实现了模块化开发和文件处理。他的思想就是“万物皆为模块”,它能够将各个模块进行按需加载,不会导致加载了无用或冗余的代码。所以他还有个名字叫前端模块化打包工具。

总结

在实际当中会将两种都选择混合使用。虽然两个都可以进行代码的压缩合并减少代码体积,但gulp.config.js中gulp的代码更加简单易懂,需要压缩合并谁就用哪个方法,而webpack样式合并需要在node环境下下载插件才能使用。另一点,gulp 是基于流的打包工具,需要谁,引用谁,并且他的压缩简单明了,后期维护起来方便,webpack则可以将具体的模块进行划分,需要哪个模块就加载哪个模块,实现按需加载,并且排除掉冗余代码,减少代码体积。

总结起来就是,gulp是基于流的自动化构建工具,但不包括模块化的功能,如果要用到的话,就需要引入外部文件,比如require.js等;而webpack是自动化模块打包工具,本身就具有模块化,并且也具有压缩合并的功能。二者侧重点不同,我认为相互结合使用会提高代码质量和代码的优化。

标签

发表评论