Gulp教程

Gulp 有用的插件

Gulp 提供了一些有用的插件来处理 HTML 和 CSS、JavaScript、图形以及下表中描述的其他一些东西。

HTML 和 CSS 插件

先生号 插件和说明
1 autoprefixer
它自动包含 CSS 属性的前缀。
2 gulp-browser-sync
它用于监视 CSS 目录中的所有 HTML 和 CSS 文件,并在文件更改时在所有浏览器中实时重新加载页面
3 gulp-useref
用于替换对非优化脚本或样式表的引用。
4 gulp-email-design
它创建将 CSS 样式转换为内联样式的 HTML 电子邮件模板。
5 gulp-uncss
它优化CSS文件并找到未使用和重复的样式。
6 gulp-csso
它是一个 CSS 优化器,可将 CSS 文件最小化,从而使文件更小。
7 gulp-htmlmin
它最小化 HTML 文件。
8 gulp-csscomb
用于为CSS制作样式格式化程序。
9 gulp-csslint
它指定了一个 CSS linter。
10 gulp-htmlhint
它指定了一个 HTML 验证器。

JavaScript 插件

先生号 插件和说明
1 gulp-autopolyfiller
它和 autoprefixer 一样,包括 JavaScript 的必要 polyfill。
2 gulp-jsfmt
用于搜索特定的代码片段。
3 gulp-jscs
用于检查 JavaScript 代码风格。
4 gulp-modernizr
它指定了用户浏览器必须提供的 HTML、CSS 和 JavaScript 功能。
5 gulp-express
它启动了 gulp express.js 网络服务器。
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 运行节点单元测试。
2 gulp-jasmine
用于报告输出相关的问题。
3 gulp-qunit
它为 QUnit 测试提供基本的控制台输出,并使用 PhantomJS 节点模块和 PhantomJS runner QUnit 插件。
4 gulp-mocha
它指定了 Mocha 的瘦包装器并运行 Mocha 测试。
5 gulp-karma
它已在 Gulp 中被弃用。

图形插件

先生号 插件和说明
1 gulpicon
它从 SVG 生成精灵并将它们转换为 PNG。
2 gulp-iconfont
它与网络字体一起用于从 SVG 创建 WOFF、EOT、TTF 文件。
3 gulp-imacss
它将图像文件转换为数据 URI 并将它们放入单个 CSS 文件中。
4 gulp-responsive
它为不同的设备生成响应式图像
5 gulp-sharp
用于改变和调整图像的方向和背景。
6 gulp-svgstore
它将SVG文件与 元素合二为一。
7 gulp-imagemin & gulp-tinypng
用于压缩PNG、JPEG、GIF、SVG等图像。
8 gulp-spritesmith
它用于从一组图像和 CSS 变量中创建 spritesheet。

编译器插件

先生号 插件和说明
1 gulp-less
它为 Gulp 提供了 LESS 插件。
2 gulp-sass
它为 Gulp 提供了 SASS 插件。
3 gulp-compass
它提供了 Gulp 的指南针插件。
4 gulp-stylus
用于在 CSS 中保持手写笔。
5 gulp-coffee
为Gulp提供coffeescript插件
6 gulp-handlebars
它为Gulp提供了把手插件。
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 插件将文件从源复制到新目标。
Gulp 提供了一些有用的插件来处理 HTML 和 CSS、JavaScript、图形以及下表中描述的其他一些东西。

HTML 和 CSS 插件

先生号 插件和说明
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
先生号 插件和说明
1 autoprefixer
它自动包含 CSS 属性的前缀。
2 gulp-browser-sync
它用于监视 CSS 目录中的所有 HTML 和 CSS 文件,并在文件更改时在所有浏览器中实时重新加载页面
3 gulp-useref
用于替换对非优化脚本或样式表的引用。
4 gulp-email-design
它创建将 CSS 样式转换为内联样式的 HTML 电子邮件模板。
5 gulp-uncss
它优化CSS文件并找到未使用和重复的样式。
6 gulp-csso
它是一个 CSS 优化器,可将 CSS 文件最小化,从而使文件更小。
7 gulp-htmlmin
它最小化 HTML 文件。
8 gulp-csscomb
用于为CSS制作样式格式化程序。
9 gulp-csslint
它指定了一个 CSS linter。
10 gulp-htmlhint
它指定了一个 HTML 验证器。

JavaScript 插件

先生号 插件和说明
1 gulp-autopolyfiller
它和 autoprefixer 一样,包括 JavaScript 的必要 polyfill。
2 gulp-jsfmt
用于搜索特定的代码片段。
3 gulp-jscs
用于检查 JavaScript 代码风格。
4 gulp-modernizr
它指定了用户浏览器必须提供的 HTML、CSS 和 JavaScript 功能。
5 gulp-express
它启动了 gulp express.js 网络服务器。
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 运行节点单元测试。
2 gulp-jasmine
用于报告输出相关的问题。
3 gulp-qunit
它为 QUnit 测试提供基本的控制台输出,并使用 PhantomJS 节点模块和 PhantomJS runner QUnit 插件。
4 gulp-mocha
它指定了 Mocha 的瘦包装器并运行 Mocha 测试。
5 gulp-karma
它已在 Gulp 中被弃用。

图形插件

先生号 插件和说明
1 gulpicon
它从 SVG 生成精灵并将它们转换为 PNG。
2 gulp-iconfont
它与网络字体一起用于从 SVG 创建 WOFF、EOT、TTF 文件。
3 gulp-imacss
它将图像文件转换为数据 URI 并将它们放入单个 CSS 文件中。
4 gulp-responsive
它为不同的设备生成响应式图像
5 gulp-sharp
用于改变和调整图像的方向和背景。
6 gulp-svgstore
它将SVG文件与 元素合二为一。
7 gulp-imagemin & gulp-tinypng
用于压缩PNG、JPEG、GIF、SVG等图像。
8 gulp-spritesmith
它用于从一组图像和 CSS 变量中创建 spritesheet。

编译器插件

先生号 插件和说明
1 gulp-less
它为 Gulp 提供了 LESS 插件。
2 gulp-sass
它为 Gulp 提供了 SASS 插件。
3 gulp-compass
它提供了 Gulp 的指南针插件。
4 gulp-stylus
用于在 CSS 中保持手写笔。
5 gulp-coffee
为Gulp提供coffeescript插件
6 gulp-handlebars
它为Gulp提供了把手插件。
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 插件提供实用程序。
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4