码迷,mamicode.com
首页 > Web开发 > 详细

Grunt、Gulp区别 webpack、 requirejs区别

时间:2018-08-28 15:23:56      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:require   并且   多个   也有   插件   抽象   导致   识别   用法   

1. 书写方式

grunt 运用配置的思想来写打包脚本,一切皆配置,所以会出现比较多的配置项,诸如option,src,dest等等。而且不同的插件可能会有自己扩展字段,导致认知成本的提高,运用的时候要搞懂各种插件的配置规则。
gulp 是用代码方式来写打包脚本,并且代码采用流式的写法,只抽象出了gulp.src, gulp.pipe, gulp.dest, gulp.watch gulp.task等接口,运用相当简单。经尝试,使用gulp的代码量能比grunt少一半左右。

2. 任务划分

gulp是工具链、构建工具,可以配合各种插件做js压缩,css压缩,less编译 替代手工实现自动化工作

1.构建工具  :    可以用构建基础项目

2.自动化  :          可以通过gulp.task配置各接口自动对js,css,html代码进行压缩, 自动刷新页面( IDE好多已经可以自动刷新了 )

3.提高效率用  :  可以编译less语法,可认快速对css的编辑

webpack是文件打包工具,可以把项目的各种js文、css文件等打包合并成一个或多个文件,主要用于模块化方案,预编译模块的方案

1.打包工具   :   gulp 也可以,但是需要按项目配置属性项 ,  webpack 很集成了,简单

2.模块化识别

3.编译模块代码方案用

所以定义和用法上来说 都不是一种东西,无可比性 ,更不冲突!【当然,也有相似的功能,比如合并,区分,但各有各的优势】 

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

Grunt、Gulp区别 webpack、 requirejs区别

标签:require   并且   多个   也有   插件   抽象   导致   识别   用法   

原文地址:https://www.cnblogs.com/andy-lehhaxm/p/9548066.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!