Tom

Webpack vs Gulp

原文链接: hackernoon.com

随着Webpack的流行,越来越多的人开始用它与Gulp进行比较。

开发者可以看到很激烈的讨论,蜂拥在Web开发网站的评论部分,来讨论哪一个更好。本文将解释Webpack是什么,它与Gulp的不同之处,什么是最重要的,我们应该使用哪一个。

介绍

人类前端演变。来源:blog.qmo.io

在过去的几年中,网络开发行业发生了很大的变化。新工具的出现不断取代旧的解决方法。以CodeKIT为例:一个基于GUI用于编译和压缩资源的的工具,现在已由Grunt取代。Gulp的出现,又立刻以其直观和强大的功能赢得了Web开发者的芳心。

现在,Webpack变得流行了起来。它会完全取代Gulp吗?对此我有不同的看法,但大势所趋:

Grunt(红色),Gulp(蓝色)和Webpack(黄色)。

那么Webpack是什么?

正如Webpack官网所说:

Webpack使用依赖关系的模块,生成代表这些模块的静态资源。

整个想法可以由下图很好地表现出来:

什么是Webpack。来源:webpack.github.io

下面你将会找到一些最新的Webpack入门资源:

Gulp vs Webpack

#1:Gulp是一个任务运行器为了缩短时间,任务运行器是一个允许自动化可重复活动的应用程序。任务在JS文件中被定义,并使用包含任务名称的命令执行。例如你可以:

  • 运行测试和合并文件

  • 编译Saas

  • 压缩CSS/HTML

  • 打包/压缩 JS

首先,你应该定义任务。整个过程很简单:

gulp.task('test:unit', () => { /* Run unit tests */});
gulp.task('test:e2e', () => { /* Run selenium tests */});
gulp.task('test', ['test:unit', 'test:e2e']);
gulp.task('build:saas', () => { /* Complie Saas */ });

所有任务都可以通过一个命令执行:

`$ gulp test`

或单独执行:

`$ gulp build:saas`

#2:Webpack不是一个任务运行器

与Gulp相反,Webpack是一个模块打包器。其主要目的是通过应用程序模块和依赖关系生成静态资源。

假设我们有一个由两个JS文件和一个CSS文件组成的应用程序:

first.js

require("!style-loader!css-loader!./style.css");
document.write(require("./second.js"));

second.js

`module.exports = "Hello world!";`

style.css

body {
    background: yellow;
}

我们可以使用Webpack将它们合并成一个文件。我们开始安装bundler和CSS加载器:

$ npm install webpack -g
$ npm install css-loader style-loader

运行以下命令:

`$ webpack ./first.js target.js`

target.js是生成的结果,一个为应用打包好的.js文件。

使用Webpack的package.json脚本

好,我们已经澄清了Webpack不是一个任务运行器。那么意味着你需要使用Gulp/Grunt来处理你的任务?并非如此。

你唯一需要做的是在package.json文件的脚本部分定义你的任务:

{
 "scripts": {
   "build": "node build.js"
 }
}

NPM或Yarn可作为任务运行器:

`$ yarn run build`

最终获胜的是…

你可以使用上述两种工具来处理几乎所有类型的工作流。Gulp是可用性的赢家:更容易定义和执行你的任务。然而,Webpack的配置选项更加灵活。它发展迅速,社区也日益壮大。

很难说哪一个是明显的赢家:这一切都取决于你的工作环境和团队的偏好。真理往往是平淡无奇的。

总结:使用Webpack与Gulp

本文的灵感来自于CSS Tricks的一篇文章,特别是评论部分。

有些人喜欢Webpack,说他们不再需要Gulp了。然而,其他人强调了Gulp的简单性,并抱怨Webpack被过度设计。有人说过:“一切都要讲究可行性,随心去选,有容乃大”。

在Buddy.Works中,我们得出结论,没有正确的答案:我们建议使用Webpack作为打包工具,但如果你刚开始使用Gulp,我们不建议完全放弃它。从长远来看,这两个应用程序的最终目标是帮助你提供更好,更快速的网站。

Buddy.Works中的Gulp/Webpack传送管道

可以看出,我们的交付工作流包含两个操作。这取决于你最终要使用什么。