Gulp和Webpack是一回事吗

栏目: 编程工具 · 发布时间: 6年前

内容简介:Gulp和Webpack是一回事吗

在我刚接触前端开发的时候,已经开始流行各种构建 工具 了;而当我上手gulp以后,webpack又大行其道了。所以,对前端工程化了解不多的我,有了“What’s the difference between using Gulp and Webpack?”的迷思(˶‾᷄ ⁻̫ ‾᷅˵)。

Gulp和Webpack是什么

首先可以从gulp和webpack的官网找到对它们的描述:

gulp

自动化构建工具 增强你的工作流程

Webpack

Webpack是当下最热门的 前端资源模块化管理和打包工具

它们都属于前端构建工具,但gulp是任务管理工具(task runner),webpack是模块化打包工具(module bundler)。

任务管理工具

任务管理工具中我们可以声明若干任务,比如合并、压缩、测试等等。任务间可互相依赖,可以是同步,也可以是异步的。然后我们可以自由地选择运行哪个任务,任务管理工具会帮我们运行它(以及它的依赖)。

使用gulp可以配置各种插件来做css或js文件的合并压缩、编译sass或less、添加兼容性前缀(-webkit-, -moz- …)、自动刷新浏览器等等,它能替代手工实现自动化工作、优化前端工作流程。

模块化打包工具

javascript本身并不支持模块化,但对于浏览器中的js和服务端的nodejs,它们运行环境是不同的,那么该如何实现js的模块化呢?

目前有两种主流方案:

  1. 在线编译模块化

    如seajs和requirejs,相当于在页面上加载一个CMD/AMD解释器。这样浏览器就认识了define、exports、module这些东西。也就实现了模块化。

  2. 预编译模块化

    webpack和browserify它们是一个 预编译模块 的方案,不需要在浏览器中加载解释器。在本地直接写js,不管是AMD/CMD/ES6风格的模块化,它都能识别并编译成浏览器认识的js。

Webpack具有grunt、gulp对于静态资源自动化构建的能力,但更重要的是,webpack弥补了requirejs在模块化方面的缺陷,同时兼容AMD与CMD的模块加载规范,具有更强大的js模块化的功能。

webpack is a module bundler. webpack takes modules with dependencies and generates static assets representing those modules.

对了,你完全可以gulp搭配webpack来使用,gulp相对来说更灵活,可以做更多的定制化任务,而webpack在模块化方面也很优秀。

总结

一图解千愁~

Gulp和Webpack是一回事吗

前端工程化还有太多需要去了解和学习的知识了,本文只是我对其中一个问题而整理的解答。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

群体性孤独

群体性孤独

[美] 雪莉·特克尔 / 周逵、刘菁荆 / 浙江人民出版社 / 2014-3-1 / CNY 66.90

[内容简介] ☆ 你是否也熟悉这样的场景:家人在一起,不是交心,而是各自看电脑和手机;朋友聚会,不是叙旧,而是拼命刷新微博、微信;课堂上,老师在讲,学生在网上聊天;会议中,别人在报告,听众在收发信息。所有这些现象都可以归结为“群体性孤独”——我们似乎在一起,但实际上活在自己的“气泡”中。我们期待他人少,期待技术多。不间断的联系,是否让人类陷入了更深的孤独? ☆ 麻省理工学院社会学教授雪......一起来看看 《群体性孤独》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具