gulp与webpack的区别

常有人拿gulp与webpack来比较，知道这两个构建工具功能上有重叠的地方，可单用，也可一起用，但本质的区别就没有那么清晰。

gulp

gulp强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。

PS：简单说就一个Task Runner

webpack

webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。

PS：webpack is a module bundle

相同功能

gulp与webpack可以实现一些相同功能，如下（列举部分）：

功能	gulp	webpack
文件合并与压缩（css）	使用gulp-minify-css模块 gulp.task('sass',function(){ gulp.src(cssFiles) .pipe(sass().on('error',sass.logError)) .pipe(require('gulp-minify-css')()) .pipe(gulp.dest(distFolder)); });	样式合并一般用到extract-text-webpack-plugin插件，压缩则使用webpack.optimize.UglifyJsPlugin。
文件合并与压缩（js）	使用gulp-uglify和gulp-concat两个模块	js合并在模块化开始就已经做，压缩则使用webpack.optimize.UglifyJsPlugin
sass/less预编译	使用gulp-sass/gulp-less 模块	sass-loader/less-loader 进行预处理
启动server	使用gulp-webserver模块 var webserver =require('gulp-webserver'); gulp.task('webserver',function(){ gulp.src('./') .pipe(webserver({ host:'localhost', port:8080, livereload:true, //自动刷新 directoryListing:{ enable: true, path:'./' }, })); });	使用webpack-dev-server模块 module.exports = { ...... devServer: { contentBase: "build/", port:8080, inline: true //实时刷新 } }
版本控制	使用gulp-rev和gulp-rev-collector两个模块	将生成文件加上hash值 module.exports = { ...... output: { ...... filename: "[name].[hash:8].js" }, plugins:[ ...... new ExtractTextPlugin(style.[hash].css") ] }

两者区别

虽然都是前端自动化构建工具，但看他们的定位就知道不是对等的。

gulp严格上讲，模块化不是他强调的东西，他旨在规范前端开发流程。

webpack更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。

总结

gulp应该与grunt比较，而webpack应该与browserify（网上太多资料就这么说，这么说是没有错，不过单单这样一句话并不能让人清晰明了）。

gulp与webpack上是互补的，还是可替换的，取决于你项目的需求。如果只是个vue或react的单页应用，webpack也就够用；如果webpack某些功能使用起来麻烦甚至没有（雪碧图就没有），那就可以结合gulp一起用。

本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。

本文地址：http://www.cnblogs.com/lovesong/p/6413546.html

gulp与webpack的区别相关推荐

Gulp和webpack的区别
背景:今天了解了大厂前端任职的一些要求:里面写了要熟悉webpack打包工具和Gulp构建工具,作为前端新人,看到这个就想这两种工具有什么区别? 在这里解答一下自已,而且希望可以帮助到有疑问的人. G ...
Gulp和Webpack对比
在现在的前端开发中,前后端分离.模块化开发.版本控制.文件合并与压缩.mock数据等等一些原本后端的思想开始逐渐渗透到"大前端"的开发中.前端开发过程越来越繁琐,当今越来越多的网站 ...
GULP和Webpack比较
转载自https://www.cnblogs.com/RuMengkai/p/6667321.html, 作者:茹孟凯, Gulp和Webpack对比在现在的前端开发中,前后端分离.模块化开发.版本 ...
前端构建工具大盘点：gulp、webpack、vite、rollup、esbuild、snowpack、babel、parcel、swc、tsc
文章目录背景分类转译器打包器对比 gulp VS webpack Bundle vs Bundleless(代表就是webpack VS vite) 其他比较个人理解总结官网背景做前 ...
gulp 与 Webpack 的异曲同工之处
gulp 我们可以认为是前端开发的生产线,gulp.task()则是每台运作的机器,当启动gulp的时候,电闸就会被合上,所有的机器开始工作,启动本地server ,编译sass,编译commenjs ...
前端架构gulp与webpack（知识点整理）
一概念介绍 gulp 是 task runner,Webpack 是 module bundler.可以这么说, Webpack 和 gulp 本身都有 95% 的功能是不能被对方替代,或者直接说和 ...
vite和webpack的区别
项目的构建是我们前端逃不开的话题. 自从我们进入了前端框架时代,构建是我们逃不开的问题,因为前端应用越来越复杂. 最近公司在从webpack过渡到vite.以下是我对他们的认识: what: webp ...
Gulp,grunt,seajs/require和browserify/webpack的区别
Gulp / Grunt 是构建工具,可以配合各种平台上的插件做js压缩,各种css编译,页面自动刷新,检查语法等,替代手工实现自动化开发 seajs/require和browserify/webpa ...
webpack源码阅读——npm脚本运行webpack与命令行输入webpack的区别
原文地址:webpack源码阅读--npm脚本执行webpack与命令行输入webpack执行的区别如有错误,欢迎指正! webpack是目前被大家广为使用的模块打包器.从命令行输入webpack或 ...

gulp与webpack的区别

gulp与webpack的区别相关推荐

最新文章

热门文章