webpack、gulp、rollup、tsc/babel 使用对比 LeapFE发布于 2020-10-28 本文档主要介绍四种工具的特点， 包括优点、缺点、 输入、输出、能够处理的文件类型，针对不同文件类型的处理方式， 以及其适用场景。 Rollup 简介 ...

gulp是为了规范前端开发流程，实现前后端分离、模块化开发、版本控制、文件合并、压缩、Mock数据等功能的一个前端自动化构建工具。 强调的是前端开发的工作流程，我们可以通过配置一系列的task（Gulp中的gulp.task()方法配置），定义task处理的事务（例如文件 ...

一、概念 gulp 构建工具 我们可以通过给gulp配置不通的task（通过Gulp中的gulp.task()方法配置，比如启动server、sass/less预编译、文件的合并压缩等等）来让gulp实现不同的功能，从而构建整个前端开发流程。 webpack 打包工具 我们可以把开发中的所有 ...

常有人拿gulp与webpack来比较，知道这两个构建工具功能上有重叠的地方，可单用，也可一起用，但本质的区别就没有那么清晰。 gulp gulp强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制 ...

1、Grunt 　　Grunt 的出现早于 Gulp，Gulp 是后起之秀。他们本质都是通过 JavaScript 语法实现了 shell script 命令的一些功能。比如利用 jshint 插件实现 JavaScript 代码格式检查这一功能。早期需要手动在命令行中输入 jshint ...

　　Webpack与Gulp、Grunt没有什么可比性，它可以看作模块打包机，通过分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。Gulp/Grunt是一种能够优化前端的开发流程 ...

webpack与gulp 、grunt没有什么可比性，它可以看作模块打包机，通过分析你的项目结构，找到js模块以及其它的一些浏览器不能直接运行的拓展语言（scss，Typescript）,并将其转换和打包为合适的格式供浏览器使用。gulp/grunt是一种能够优化前端的开发的流程的工具 ...

webpack是前端构建工具，称为模块打包机，webpack支持模块化；构建前端开发过程中常用的文件，如：js，css，html，img等；使用简单方便，自动化构建。webpack是通过loader（加载器）和plugins（插件）对资源进行处理的。 Glup侧重于前端开发的整个过程的控制管理 ...