gulp和webpack究竟有什么区别?

我学了这两款工具之后,发现他们做的事情基本上都是一样的啊,比如说整合好几个js文件(模块)成一个文件,然后进行压缩和检查语法,或者调用bable和sass编译器把他们编译成浏览器可以用的文件,包括gulp的watch在webpack里面也有插件可以实现这个功能,那么他们区别究竟是什么呢?

我百度了半天,很多人只是从用法上说了他们的区别,webpack是写好配置文件,然后webpack自己按照配置文件来执行前端构建流程,而gulp是直接自己写流程,就像linux下写sh那样,那么这只是用法上的区别,从他们的执行结果和功能来看我看不出啥区别啊。。。

阅读 27k
评论 2017-01-09 提问
    7 个回答

    Gulp 的定位是 Task Runner, 就是用来跑一个一个任务的。
    放在以前比如我想用sass写css, coffee写js, 我必须手动的用相应的compiler去编译各自的文件,然后各自minify。这时候designer给你了两张新图片,好嘞,接着用自己的小工具手动去压缩图片。
    后来前端人不能忍了,搞出个自动化这个流程的 Grunt/Gulp, 比如你写完代码后要想发布production版本,用一句 gulp build 就可以

    1. rm 掉 dist文件夹中以前的旧文件

    2. 自动把sass编译成css, coffee编译成js

    3. 压缩各自的文件,压缩图片,生成图片sprite

    4. 拷贝minified/uglified 文件到 dist 文件夹

    但是它没发解决的是 js module 的问题,是你写代码时候如何组织代码结构的问题.

    之前大家可以用 require.js, sea.js 来 require dependency, 后来出了一个 webpack 说 我们能不能把所有的文件(css, image, js) 都用 js 来 生成依赖,最后生成一个bundle呢? 所以webpack 也叫做file bundler.

    同时 webpack 为了解决可以 require 不同文件的需求引入了loader, 比如面对sass文件有

    1. sass-loader, 把sass 转换成 css

    2. css-loader, 让 webpack 能识别处理 css

    3. style-loader, 把识别后的 css 插入到 html style中
      类似的识别es6 有babel-loader

    本来这就是 webpack 的初衷,require everything, bundle everything. 一开始 webpack 刚出来的时候大家都是把它结合着 gulp 一起用的, gulp 里面有个 gulp-webpack,就是让 webpack 专门去做module dependency的事情, 生成一个bundle.js文件,然后再用 gulp 去做一些其他杂七杂八minify, uglify的事情。 后来人们发现 webpack 有个plugins的选项, 可以用来进一步处理经过loader 生成的bundle.js,于是有人写了对应的插件, 所以minify/uglify, 生成hash的工作也可以转移到webpack本身了,挤掉了gulp这部分的市场份额。 再后来大家有发现 npm/package.json 里面的scripts 原来好好用啊,调用任务的时候就直接写一个简单的命令,因为 gulp 也不就是各种插件命令的组合呀,大部分情况下越来越不需要 gulp/grunt 之类的了 ref. 所以你现在看到的很多新项目都是package.json里面scripts 写了一堆,外部只需要一个webpack就够了。

    打个不恰当的比方,webpack就像微信一样,本来就是做聊天(module dependency)的,后来生生搞出一个微信小程序(processing files),大家面对简单的需求发现这个比原生app方便使用啊,于是开发原生的人越来越少一样。

    所以 LZ 一开始就模仿其他项目用 npm scripts + webpack 就好了,当你发现有哪些任务你没法用 webpack 或者npm scripts 解决起来麻烦, 这个时候再引入task runner 也不迟

    评论 赞赏 2017-01-10

      说白了都是打包工具,只是webpack整合了gulp的优点。给你推荐一个视频上面说的很清楚http://www.imooc.com/video/9883
      如果你想要一步一步来配置你环境,那么gulp就很适合,如果你想一下子就配备大部分需要的环境,那么webpack就可以,只要写好package.json就可以。从执行的结果上来看,是没有什么区别。只要工具用的顺手,你喜欢哪个久用哪个。当然,就如视频里面所说的,webpack是趋势。仔细看看视频吧

      评论 赞赏 2017-01-09

        他们说:gulp是个工具,webpack是一个方案...咋说呢,框架和插件的差别,你能理解么?

        评论 赞赏 2017-01-09

          gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

          webpack is a module bundler. It packs CommonJs/AMD modules i. e. for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand.

          评论 赞赏 2017-01-09

            从功能上说,都是为了实现模块化开发的一种手段。
            但是两者实现的方式不一样而已,楼主不要纠结了,用webpack吧,况且webpack也早晚会被ES7取代,纠结着干哈啊?

            评论 赞赏 2017-01-09
              stardew
              • 6.1k

              gulp根本就没法跟webpack相比,gulp只是一个比grunt简单点的打包工具,webpack的功能就太强大了,你自己用过就知道了。

              评论 赞赏 2017-01-09
                Suoz
                • 39

                Gulp类似于一个产品流水线,对配置文件gulpfile.js中的task配置路径下所有文件进行相关的操作。

                webpack对于一切文件视为模块,根据配置文件webpack.config.js中的entry入口文件的依赖文件层层递归并静态分析,运用相对应的规则转换为静态资源。

                评论 赞赏 2018-01-07
                  撰写回答

                  登录后参与交流、获取后续更新提醒