前面我们讲到在学习压缩 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 | 它以人类可读的格式指定文件大小 |
网友评论