其他分享
首页 > 其他分享> > Grunt+Gulp+Webpack知识点整理

Grunt+Gulp+Webpack知识点整理

作者:互联网

Grunt知识点整理

GRUNT

JavaScript 世界的构建工具。中文主页

为何要用构建工具?

一句话:自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。

为什么要使用 Grunt?

Grunt 生态系统非常庞大,并且一直在增长。由于拥有数量庞大的插件可供选择,因此,你可以利用 Grunt 自动完成任何事,并且花费最少的代价。如果找不到你所需要的插件,那就自己动手创造一个 Grunt 插件,然后将其发布到 npm 上吧。

常用功能

入门配置

gulp知识点整理

gulp

gulp 是基于 node 实现 Web 前端自动化开发的工具。中文主页

Gulp介绍

gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率。 在 Web 前端开发工作中有很多“重复工作”,比如压缩CSS/JS文件。而这些工作都是有规律的。找到这些规律,并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。
Gulp.js 是一个前端构建工具,与 grunt.js 相比,Gulp.js 无需写一大堆繁杂的配置参数,AP I也非常简单,学习起来很容易,而且 Gulp.js 使用的是 node.js 中 stream 来读取和操作数据,其速度更快。

Gulp优点

  1. gulp 将开发流程中让人痛苦或耗时的任务自动化,从而减少你所浪费的时间、创造更大价值。
  2. 代码优于配置、node 最佳实践、精简的 API 集,gulp 让工作前所未有的简单。
  3. 基于 node 强大的流(stream)能力,gulp 在构建过程中并不把文件立即写入磁盘,从而提高了构建速度。
  4. 遵循严格的准则,确保我们的插件结构简单、运行结果可控。

入门配置

Webpack知识点整理

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。中文主页

什么是Webpack?

Webpack核心概念

理解Loader

常见的loader:

配置文件(默认)

插件

常见的插件:

入门配置

Webpack常用配置项

entry:打包的入口文件,一个字符串或者一个对象
output:配置打包的结果,一个对象
fileName:定义输出文件名,一个字符串
path:定义输出文件路径,一个字符串
module:定义对模块的处理逻辑,一个对象
loaders:定义一系列的加载器,一个数组

[
 {
		test:正则表达式,用于匹配到的文件
		loader/loaders:字符串或者数组,处理匹配到的文件。如果只需要用到一个模块加载器则使用loader:string,如果要使用多个模块加载器,则使用loaders:array
		include:字符串或者数组,指包含的文件夹
		exclude:字符串或者数组,指排除的文件夹
	}
]

resolve:影响对模块的解析,一个对象
extensions:自动补全识别后缀,是一个数组
plugins:定义插件,一个数组

Grunt、Gulp、Webpack区别

gulp和grunt是流管理工具,通过一个个task配置执行用户需要的功能,如格式检验,代码压缩等,值得一提的是,经过这两者处理的代码只是局部变量名被替换简化,整体并没有发生改变,还是你的代码。

而webpack则进行了更彻底的打包处理,更加偏向对模块语法规则进行转换。主要任务是突破浏览器的鸿沟,将原本浏览器不能识别的规范和各种各样的静态文件进行分析,压缩,合并,打包,最后生成浏览器支持的代码,因此,webapck打包过后的代码已经不是你写的代码了

问题总结

webpack与grunt、gulp的不同?

三者都是前端构建工具,grunt和gulp在早期比较流行,现在webpack相对来说比较主流,不过一些轻量化的任务还是会用gulp来处理,比如单独打包CSS文件等。

grunt和gulp是基于任务和流(Task、Stream)的。类似jQuery,找到一个(或一类)文件,对其做一系列链式操作,更新流上的数据, 整条链式操作构成了一个任务,多个任务就构成了整个web的构建流程。

webpack是基于入口的。webpack会自动地递归解析入口所需要加载的所有资源文件,然后用不同的Loader来处理不同的文件,用Plugin来扩展webpack功能。

总结:

webpack有哪些优点

webpack的缺点

bundle,chunk,module是什么

有哪些常见的Loader?他们是解决什么问题的?

有哪些常见的Plugin?他们是解决什么问题的?

Loader和Plugin的不同?

不同的作用:

不同的用法:

webpack的构建流程是什么?从读取配置到输出文件这个过程尽量说全

Webpack 的运行流程是一个串行的过程,从启动到结束会依次执行以下流程:

在以上过程中,Webpack 会在特定的时间点广播出特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。

是否写过Loader和Plugin?描述一下编写loader或plugin的思路?

Loader像一个"翻译官"把读到的源文件内容转义成新的文件内容,并且每个Loader通过链式操作,将源文件一步步翻译成想要的样子。

编写Loader时要遵循单一原则,每个Loader只做一种"转义"工作。 每个Loader的拿到的是源文件内容(source),可以通过返回值的方式将处理后的内容输出,也可以调用this.callback()方法,将内容返回给webpack。 还可以通过 this.async()生成一个callback函数,再用这个callback将处理后的内容输出出去。 此外webpack还为开发者准备了开发loader的工具函数集——loader-utils。

相对于Loader而言,Plugin的编写就灵活了许多。 webpack在运行的生命周期中会广播出许多事件,Plugin 可以监听这些事件,在合适的时机通过 Webpack 提供的 API 改变输出结果。

如何利用webpack来优化前端性能?(提高性能和体验)

用webpack优化前端性能是指优化webpack的输出结果,让打包的最终结果在浏览器运行快速高效。

如何提高webpack的构建速度?

标签:知识点,插件,gulp,webpack,loader,Gulp,Webpack,文件,模块
来源: https://blog.csdn.net/weixin_42357192/article/details/120513717