Gulp - 实用插件

Gulp 提供了一些实用的插件来处理 HTML & CSS、JavaScript、图形和其他一些内容，如下表所示。

HTML & CSS 插件

序号	插件及描述
1	autoprefixer 它自动为 CSS 属性添加前缀。
2	gulp-browser-sync 它用于监视 CSS 目录中的所有 HTML 和 CSS 文件，并在文件更改时对所有浏览器中的页面执行实时重载。
3	gulp-useref 它用于替换对未优化的脚本或样式表的引用。
4	gulp-email-design 它创建 HTML 邮件模板，并将 CSS 样式转换为内联样式。
5	gulp-uncss 它优化 CSS 文件，并查找未使用的和重复的样式。
6	gulp-csso 它是一个 CSS 优化器，可以最小化 CSS 文件，从而减小文件大小。
7	gulp-htmlmin 它最小化 HTML 文件。
8	gulp-csscomb 它用于创建 CSS 样式格式化程序。
9	gulp-csslint 它指定一个 CSS 代码检查工具。
10	gulp-htmlhint 它指定一个 HTML 验证器。

JavaScript 插件

序号	插件及描述
1	gulp-autopolyfiller 它类似于 autoprefixer，它包含 JavaScript 所需的 polyfills。
2	gulp-jsfmt 它用于搜索特定的代码片段。
3	gulp-jscs 它用于检查 JavaScript 代码风格。
4	gulp-modernizr 它指定用户浏览器支持哪些 HTML、CSS 和 JavaScript 功能。
5	gulp-express 它启动 gulp express.js web 服务器。
6	gulp-requirejs 它使用 require.js 将 require.js AMD 模块组合到一个文件中。
7	gulp-plato 它生成复杂度分析报告。
8	gulp-complexity 它分析代码的复杂性和可维护性。
9	fixmyjs 它修复 JSHint 结果。
10	gulp-jscpd 它用作源代码的复制/粘贴检测器。
11	gulp-jsonlint 它是 JSON 验证器。
12	gulp-uglify 它压缩 JavaScript 文件。
13	gulp-concat 它连接 CSS 文件。

单元测试插件

序号	插件及描述
1	gulp-nodeunit 它从 Gulp 运行 Node 单元测试。
2	gulp-jasmine 它用于报告与输出相关的问题。
3	gulp-qunit 它为 QUnit 测试提供基本的控制台输出，并使用 PhantomJS node 模块和 PhantomJS 运行器 QUnit 插件。
4	gulp-mocha 它指定 Mocha 的薄包装器并运行 Mocha 测试。
5	gulp-karma 它在 Gulp 中已被弃用。

图形插件

序号	插件及描述
1	gulpicon 它从 SVG 生成精灵图并将其转换为 PNG。
2	gulp-iconfont 它与 web 字体一起使用，从 SVG 创建 WOFF、EOT、TTF 文件。
3	gulp-imacss 它将图像文件转换为 data URI 并将它们放入单个 CSS 文件中。
4	gulp-responsive 它为不同的设备生成响应式图像。
5	gulp-sharp 它用于更改和调整图像的方向和背景。
6	gulp-svgstore 它将 SVG 文件组合成一个带有 <symbol> 元素的文件。
7	gulp-imagemin & gulp-tinypng 它用于压缩图像，例如 PNG、JPEG、GIF、SVG。
8	gulp-spritesmith 它用于根据一组图像和 CSS 变量创建雪碧图。

编译器插件

序号	插件及描述
1	gulp-less 它为 Gulp 提供 LESS 插件。
2	gulp-sass 它为 Gulp 提供 SASS 插件。
3	gulp-compass 它为 Gulp 提供 compass 插件。
4	gulp-stylus 它用于在 CSS 中使用 stylus。
5	gulp-coffee 它为 Gulp 提供 coffeescript 插件。
6	gulp-handlebars 它为 Gulp 提供 handlebars 插件。
7	gulp-jst 它在 JST 中提供下划线模板。
8	gulp-react 它将 Facebook React JSX 模板指定为 JavaScript。
9	gulp-nunjucks 它在 JST 中指定 Nunjucks 模板。
10	gulp-dustjs 它在 JST 中指定 Dust 模板。
11	gulp-angular-templatecache 它在 templateCache 中指定 AngularJS 模板。

其他插件

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

序号	插件及描述
1	gulp-grunt 它从 Gulp 运行 Grunt 任务。
2	gulp-watch 它在文件更改时监视文件。
3	gulp-notify 任务失败时，它会通知错误消息。
4	gulp-git 它允许使用 Git 命令。
5	gulp-jsdoc 它为 Gulp 创建 JavaScript 文档。
6	gulp-rev 它为文件名提供静态资源版本控制。
7	gulp-bump 它增加 JSON 包中的版本号。
8	gulp-bower-files 它用于注入 bower 包。
9	gulp-removelogs 它删除 console.log 语句。
10	gulp-preprocess 它根据上下文或环境配置预处理 HTML、JavaScript 和其他文件。
11	gulp-duration 它指定 Gulp 任务的持续时间。
12	gulp-changed & gulp-newer 它运行已修改的文件和较新的文件。
13	gulp-connect 它用于运行带有 LiveReload 的 web 服务器。
14	gulp-shell 它运行 Shell 命令。
15	gulp-ssh 它使用 SSH 和 SFTP 任务进行连接。
16	gulp-zip 它压缩文件和文件夹。
17	gulp-clean & gulp-copy
18	gulp-filesize 它以人类可读的格式指定文件大小。
19	gulp-util 它为 gulp 插件提供实用程序。

打印页面

广告