Gulp 插件

Posted 2021-09-13 知否

前面我们讲到在学习压缩 JS、CSS、图片等文件时，需要用到一些相关的插件。Gulp 提供了一些有用的插件来处理 html 和 CSS，javascript，图形以及一些其他内容。下面我们来看一下 gulp 中的一些不同类型插件。

HTML和CSS插件

插件	描述
autoprefixer	自动包含 CSS 属性的前缀
gulp-browser-sync	用于监视 CSS 目录中的所有 HTML 和 CSS 文件，并在文件更改时对所有浏览器中的页面执行实时重新加载
gulp-useref	用于替换对非优化脚本或样式表的引用
gulp-email-design	创建 HTML 电子邮件模板，将 CSS 样式转换为内联
gulp-uncss	优化 CSS 文件和查找未使用和重复的样式
gulp-csso	是一个 CSS 优化器，可以最小化 CSS 文件，从而缩小文件大小
gulp-htmlmin	最小化 HTML 文件
gulp-csscomb	用于制作 CSS 的样式格式化程序
gulp-csslint	它指定一个 CSS linter
gulp-htmlhint	指定一个 HTML 验证器

JavaScript插件

插件	描述
gulp-autopolyfiller	它与 autoprefixer 相同，包括 JavaScript 的必要 polyfill
gulp-jsfmt	用于搜索特定的代码段
gulp-jscs	用于检查 JavaScript 代码样式
gulp-modernizr	指定了用户浏览器提供的 HTML，CSS 和 JavaScript 功能
gulp-express	启动了gulp express.js 网络服务器
gulp-requirejs	使用 require. js 将 require.js AMD 模块组合成一个文件
gulp-plato	生成复杂性分析报告
gulp-complexity	分析了代码的复杂性和可维护性
fixmyjs	修复了 JSHint 的结果
gulp-jscpd	用作源代码的复制/粘贴检测器
gulp-jsonlint	是 JSON 验证器
gulp-uglify	缩小了 JavaScript 文件
gulp-concat	连接 CSS 文件

单元测试插件

插件	描述
gulp-nodeunit	运行 Gulp 的节点单元测试
gulp-jasmine	用于报告与输出相关的问题
gulp-qunit	为 QUnit 测试提供基本的控制台输出，并使用 PhantomJS 节点模块和 PhantomJS 运行器 QUnit 插件
gulp-mocha	指定了 Mocha 周围的薄包装并运行 Mocha 测试
gulp-karma	已在 Gulp 中弃用

图形插件

插件	描述
gulpicon	从 SVG 生成精灵并将它们转换为 PNG
gulp-iconfont	与 Web 字体一起用于从 SVG 创建 WOFF，EOT，TTF 文件
gulp-imacss	将图像文件转换为数据 URI 并将它们放入单个 CSS 文件中
gulp-responsive	为不同的设备生成响应式图像
gulp-sharp	它用于更改和调整图像的方向和背景
gulp-svgstore	将 SVG 文件与元素组合成一个文件
gulp-imagemin&gulp-tinypng	用于压缩 PNG，JPEG，GIF，SVG 等图像
gulp-spritesmith	用于从一组图像和 CSS 变量创建 spritesheet

编译器插件

插件	描述
gulp-less	为 Gulp 提供了少量插件
gulp-sass	为 Gulp 提供 SASS 插件
gulp-compass	为 Gulp 提供指南针插件
gulp-stylus	用于将手写笔保存在 CSS 中
gulp-coffee	为 Gulp 提供 coffeescript 插件
gulp-handlebars	为 Gulp 提供了把手插件
gulp-jst	在 JST 中提供下划线模板
gulp-react	将 Facebook React JSX 模板指定为 JavaScript
gulp-nunjucks	在 JST 中指定 Nunjucks 模板
gulp- dustjs	在 JST 中指定了 Dust 模板
gulp-angular-templatecache	在 templateCache 中指定 AngularJS 模板

其他插件

gulp-clean 插件删除文件和文件夹，gulp-copy 插件将文件从源文件复制到新目的地。

插件	描述
gulp-grunt	从 Gulp 运行 Grunt 任务
gulp-watch	无论何时进行更改，它都会监视文件
gulp-notify	只要任务失败，它就会通知错误消息
gulp-git	它允许使用 Git 命令.
gulp-jsdoc	为 Gulp 创建 JavaScript 文档
gulp-rev	它提供对文件名的静态资产修订
gulp-bump	增加了 JSON 包中的版本
gulp-bower-files	用于注入凉亭包
gulp-removelogs	删除了 console.log 语句
gulp-preprocess	根据上下文或环境配置预处理 HTML，JavaScript 和其他文件
gulp-connect	它用于运行 LiveReload 的 Web 服务器
gulp-shell	运行 Shell 命令
gulp-ssh	使用 SSH 和 SFTP 任务进行连接
gulp-zip	它压缩文件和文件夹
gulp-util	为 gulp 插件提供实用工具
gulp-filesize	它以人类可读的格式指定文件大小