Gulp应该和Grunt比较,他们的区别我就不说了,说说用处吧。Gulp / Grunt 是一种工具,能够优化前端工作流程。比如自动刷新页面、combo、压缩css、js、编译less等等。简单来说,就是使用Gulp/Grunt,然后配置你需要的插件,就可以把以前需要手工做的事情让它帮你做了。

说到 browserify / webpack ,那还要说到 seajs / requirejs 。这四个都是JS模块化的方案。其中seajs / require 是一种类型,browserify / webpack 是另一种类型。

seajs / require : 是一种在线"编译" 模块的方案,相当于在页面上加载一个 CMD/AMD 解释器。这样浏览器就认识了 define、exports、module 这些东西。也就实现了模块化。

browserify / webpack : 是一个预编译模块的方案,相比于上面 ,这个方案更加智能。没用过browserify,这里以webpack为例。首先,它是预编译的,不需要在浏览器中加载解释器。另外,你在本地直接写JS,不管是 AMD / CMD / ES6 风格的模块化,它都能认识,并且编译成浏览器认识的JS。
这样就知道,Gulp是一个工具,而webpack等等是模块化方案。Gulp也可以配置seajs、requirejs甚至webpack的插件。

webpack和gulp的区别的更多相关文章

  1. webpack与gulp的区别及实例搭建

    webpack是什么,提到这个概念,很多人可能立马说出来,模块化加载器兼打包工具,可以把各种资源都作为模块来使用和处理等等. 说到前端构建工具,不可避免的会提到gulp,到底webpack和gulp有 ...

  2. webpack与gulp的区别

    gulp是工具链.构建工具,可以配合各种插件做js压缩,css压缩,less编译 替代手工实现自动化工作 1.构建工具 2.自动化 3.提高效率用 webpack是文件打包工具,可以把项目的各种js. ...

  3. Webpack与Gulp、Grunt区别

    Webpack与Gulp.Grunt没有什么可比性,它可以看作模块打包机,通过分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等 ...

  4. Gulp和webpack的作用和区别

    gulp是工具链.构建工具,可以配合各种插件做js压缩,css压缩,less编译 替代手工实现自动化工作 1.构建工具 2.自动化 3.提高效率用 webpack是文件打包工具,可以把项目的各种js文 ...

  5. Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  6. Webpack和Gulp对比

    Webpack和Gulp对比 作者 彬_仔 关注 2016.10.19 22:42* 字数 8012 阅读 2471评论 18喜欢 68 在现在的前端开发中,前后端分离.模块化开发.版本控制.文件合并 ...

  7. 【原】webpack结合gulp打包

    在我前面的文章中,总结了一下自己学习webpack和gulp的一些东西.然而,在我的实际项目中,单独使用它们两者不能满足项目的需求.我遇到了下面的一些问题. 问题1: 因为我的图片需要放单cdn上面去 ...

  8. 前端构建工具之争——Webpack vs Gulp 谁会被拍死在沙滩上

    .table tr>td:nth-child(1){width: 2em !important;padding-left: .6rem !important;padding-right: .6r ...

  9. Webpack vs Gulp

    Webpack vs Gulp 谁会被拍死在沙滩上   本文组织结构 理想的前端开发流程 Gulp 为何物 Webpack 又是从哪冒出来的 结论 文章有点长,总共 1800 字,阅读需要 18 分钟 ...

随机推荐

  1. sprint 3 总结

    1.要求: 演示可参考毕业设计答辩,包含两部分内容: 项目陈述,可综述项目.团队.开发过程等. 运行演示,实现的功能.业务.用户反馈等. 希望各组认真准备,拿出最好的阵容最好的状态,展示一学期的学习与 ...

  2. 比较器:Compare接口与Comparator接口区别与理解

    一.实现Compare接口与Comparator接口的类,都是为了对象实例数组排序的方便,因为可以直接调用 java.util.Arrays.sort(对象数组名称),可以自定义排序规则. 不同之处: ...

  3. 在macbook上搭建ubuntu工作环境

    工作环境需要:ubuntu12.04.gcc 4.4.7.vim.source insight.git. 1. 制作启动盘 首先需要制作一个能从苹果电脑启动的ubuntu启动盘: 在苹果电脑的终端中输 ...

  4. 关于header跳转之后的乱码

    http://www.360doc.com/content/11/0603/19/7052474_121495648.shtml 问题:不同网站的跳转出现乱码,不同编码的页面传递参数也出现乱码 搞清楚 ...

  5. [Asp.net]Uploadify上传大文件,Http error 500 解决方案

    /// 原来这个项目中用了这个控件 所以config设置文件大小没有 现在可以了 <location path="MailWrite.aspx" > <!--上传 ...

  6. Oracle基本sql操作

    1.查询用户下的所有表 查询用户下的所有表 select distinct table_name from user_tab_columns; 2.搜索出前N条记录 Select a.*,rownum ...

  7. LoadRunner培训初级教程

    一 LoadRunner简介 1.1 Loadrunner介绍 LoadRunner 是 HP Mercury Interactive 用来测试应用程序性能的工具  LoadRunner 通过模拟一个 ...

  8. quick-cocos2d-x :加入学习

    语法不熟悉, 接口不熟悉. 部分不理解. 超级初学者. 好好学习, 一直在学习 使用Quick-Cocos2d-x搭建一个横版过关游戏 推荐官方的文档和例子  demo

  9. 【转载】移动web开发经验总结

    本文出自: http://blog.163.com/hsb001_mobile/blog/static/15524028020111177221254/ 1.-webkit-tap-highlight ...

  10. webpack react基础配置一

    简单介绍webpack react基本配置,入门型: 环境配置: 依赖nodejs,官网下载最新版的nodejs:nodejs.org/en 安装完nodejs  npm便自动集成了,通过npm安装其 ...