目录

Gulp - 有用的插件( Useful Plugins)

Gulp提供了一些有用的插件来处理HTML和CSS,JavaScript,Graphics以及下表中描述的其他一些内容。

HTML和CSS插件

Sr.No. 插件和说明
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 linter。

10 gulp-htmlhint

它指定了一个HTML验证器。

JavaScript插件

Sr.No. 插件和说明
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 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文件。

单元测试插件

Sr.No. 插件和说明
1 gulp-nodeunit

它运行Gulp的节点单元测试。

2 gulp-jasmine

它用于报告与输出相关的问题。

3 gulp-qunit

它为QUnit测试提供基本的控制台输出,并使用PhantomJS节点模块和PhantomJS运行器QUnit插件。

4 gulp-mocha

它指定了Mocha周围的薄包装并运行Mocha测试。

5 gulp-karma

它已在Gulp中弃用。

图形插件

Sr.No. 插件和说明
1 gulpicon

它从SVG生成精灵并将它们转换为PNG。

2 gulp-iconfont

它与Web字体一起用于从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。

编译器插件

Sr.No. 插件和说明
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插件将文件从源复制到新目标。

Sr.No. 插件和说明
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

它用于注入凉亭包。

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插件提供实用程序。

↑回到顶部↑
WIKI教程 @2018