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

本文暂时没有评论,来添加一个吧(●'◡'●)