承接前一篇《做一个合格的前端,gulp自动化构建工具入门教程》故而整理了如下gulp插件资源大全。
**【我的新作观点网:http://www.guandn.com (观点网是一个猎获新奇、收获知识、重在独立思考的网站)。
PS:接下来我会逐一开源观点网开发过程中的前后端技术,如:lucene全文索引、自定义富文本编辑器、图片上传压缩水印等等。】**

之前我也整理过一篇《javascript功能插件大集合》,有小伙伴留言说”能有链接就好了“,因此这次整理gulp相关资料的时候,特意录入了插件地址,方便小伙伴们查找学习。

通用资源
官网
Github库
插件注册
NPM模块
插件黑名单

官方文档
快速开始
API文档
CLI 文档
开始写一个插件
使用诀窍

组织
StackOverflow
Twitter

Gulp入门
使用Gulp构建前端工程
通过Gulp.js轻松自动化构建你的前端工程
Gulp,让前端工程可视化
Gulp.js是什么?
使用Gulp在你的HTML中直接插入Scripts和Styles标签
5节课学会使用Gulp.js
我是怎样摆脱前端工程的困扰的?
第一次开始Gulp Task
为什么你不自己写一个Gulp插件?
6个最好的从根本改善你的开发经验的Gulp实战练习
Gulp初学者教程

Gulp 4 入门
迁移到Gulp 4的例子
Gulp 4: 新的task执行系统 - gulp.parallel 和 gulp.series

Gulp with Browserify
Gulp + Browserify, the Gulp-y Way
Gulp + Browserify
快速构建Browserify和Watchify

Gulp with Angular
Angular工程需要什么 - Gulp能提供什么

Gulp with Angular and Browserify
使用 Gulp, Node and Browserify构建先进的 AngularJS工程结构

Gulp with React and Browserify
Browserify、Gulp 和 React
Taking React to the Next Level: Mixins, Gulp, and Browserify

Gulp with Ember
使用Gulp.js改进你的Ember.js工作流

其他资源
Gulp 备忘录
Gulp清单

gulp插件部分

一、编译
gulp-sass - 通过 libsass将Sass编译成 CSS
gulp-ruby-sass - 通过 Ruby Sass将Sass编译成CSS
gulp-compass - 通过 Ruby Sass和CompassSass编译成CSS
gulp-less - Less编译成 CSS.
gulp-stylus - Stylus 编译成 CSS.
gulp-postcss - Pipe CSS 通过 PostCSS processors with a single parse.
gulp-coffee - Coffeescript 编译成 JavaScript.
gulp-typescript - TypeScript编译成JavaScript.
gulp-react - Facebook React JSX 模板编译成JavaScript.
webpack-stream - 将webpack集成在Gulp中使用。
gulp-babel - ES6编译成ES5 通过 babel.
gulp-traceur - ES6编译成ES5 通过 Traceur.
gulp-regenerator - ES6编译成ES5 通过 Regenerator.
gulp-myth - Myth - a polyfill for future versions of the CSS spec.

二、合并
gulp-concat - 合并文件.

三、压缩
gulp-clean-css - 压缩 CSS 通过 clean-css.
gulp-csso - 压缩 CSS 通过 CSSO.
gulp-uglify - 压缩 JavaScript 通过 UglifyJS2.
gulp-htmlmin - 压缩 HTML 通过 html-minifier.
gulp-minify-html - 压缩 HTML 通过 Minimize.
gulp-imagemin - 压缩 PNG, JPEG, GIF and SVG 图片 通过 imagemin.
gulp-svgmin - 通过Gulp压缩 SVG 文件

四、优化
gulp-uncss - 移除未使用的CSS选择器通过 UnCSS.
gulp-css-base64 - 将CSS文件中所有的资源(有url()声明的)变成base64-encoded 数据的URI字符串
gulp-svg2png - 将SVGs转换成PNGs
gulp-responsive - 生成不同尺寸的图片
gulp-svgstore -将svg files 合并成一个通过 元素
gulp-iconfont - 通过SVG icons创建 icon fonts

五、资源注入
gulp-useref - 解析HTML文件中特殊标签里面的script或style标签,合并成一个script或css文件,并替换。
gulp-inject - 将指定的css或js文件以标签的形式插入到HTML中的指定标志内。
wiredep - 将Bower依赖自动注入HTML文件中。

六、模板
gulp-angular-templatecache - 在$templateCache中联系并注册AngularJS模板
gulp-jade - Jade 转换成 HTML.
gulp-handlebars - Handlebars模板转换成 JavaScript.
gulp-hb - Handlebars 模板转换成 HTML.
gulp-nunjucks - Nunjucks模板转换成JavaScript.
gulp-dustjs - Dust模板转换成JavaScript.
gulp-riot - Riot模板转换成JavaScript.
gulp-markdown - Markdown → HTML.
gulp-template - Lodash 模板转换成JavaScript.
gulp-swig - Swig模板转换成HTML.
gulp-remark - Gulp plugin for [remark]的Gulp插件(https://github.com/wooorm/rem... 通过插件处理markdown

七、代码校验
gulp-csslint - 通过CSSLint自动校验CSS.
gulp-htmlhint - 通过HTMLHint校验HTML.
gulp-jshint - 通过JSHint发现错误和潜在的问题.
gulp-jscs - 通过jscs检查JavaScript代码风格.
gulp-coffeelint - 一种用来保证CoffeeScript代码风格统一的检查。
gulp-tslint - gulp的TypeScript代码校验插件.
gulp-eslint - ECMAScript/JavaScript代码校验.
gulp-w3cjs - 通过w3cjs检验HTML.
gulp-lesshint - 通过lesshint校验LESS.

八、实时加载
browser-sync - 保证多个浏览器或设备网页同步显示 (recipes).
gulp-livereload - Gulp的实时加载插件.

九、缓存
gulp-changed - 仅让发生改变的文件通过.
gulp-cached - 一个简单的文件内存缓存.
gulp-remember - 记忆并回收通过了的文件.
gulp-newer - 只让新的源码通过.

十、流控制
merge-stream - 合并多个流到一个插入的流.
streamqueue - 逐渐输入队列的流.
run-sequence - 按要求运行一些依赖的Gulptask.
gulp-if - 按照条件运行task.

十一、日志
gulp-notify - Gulp的通知插件.
gulp-size - 显示你的项目的大小.
gulp-debug - 通过调试文件流来观察那些文件通过了你的Gulp管道.

十二、测试
gulp-mocha - 运行Mocha测试用例.
gulp-jasmine - 在Node.js中运行Jasmine 2 测试用例.
gulp-protractor - 为Protractor测试用例包裹Gulp.
gulp-coverage - 为Node.js覆盖相对于运行的测试运行独立的报告.
gulp-karma - 通过Gulp运行Karma测试用例.
gulp-ava- 通过Gulp运行AVA 测试用例.

十三、其他插件
gulp-util - 包含一系列有用插件.
gulp-plumber - 防止错误引起管道中断Prevent pipe breaking caused by errors.
gulp-load-plugins - 自动加载Gulp插件.
main-bower-files - 构建时自动获取bower库的文件.
autoprefixer - 解析CSS且根据规则添加浏览器兼容性前缀.
gulp-sourcemaps - 提供source map支持.
gulp-replace - Gulp的一个字符串替换插件.
gulp-rename - 轻松重命名文件.
gulp-rev - 在静态文件名的后面添加hash值,如: unicorn.css → unicorn-d41d8cd98f.css.
del - 使用globs删除文件/文件夹.
gulp-exec - 运行一个shell命令.
gulp-strip-debug - 除去javascript代码中的console,alert,debugger声明.
gulp-cssimport - 解析CSS文件,找到imports,将连接文件替换成imort声明.
gulp-inline-css - 将HTML中的css属性放到style标签中.
gulp-gh-pages - 将内容发布到GiHub有页面.
gulp-ng-annotate - 通过ng-annotate添加Angular依赖注入.
gulp-bump - 通过Gulp Bump任何semvar JSON版本.
gulp-file-include - 通过Gulp Include文件.
gulp-zip - 以ZIP格式压缩文件.
gulp-git - 通过Gulp运行git命令.
gulp-filter - 使用globbing过滤文件.
gulp-preprocess - 基于自定义内容或环境配置预处理文件.

脚手架

一、模板
web-starter-kit - Google的Web Starter Kit.
gulp-plugin-boilerplate - 创建Gulp插件的开始模板.
polymer-starter-kit -Polymer 1.0 应用的起点.
este - 同构的web应用最全面的React/Flux开发栈和开始模板.
mnml - 开发响应式HTML5/Sass项目的最小开始模板.
kraken 一个轻量级的、移动端优先的前端开发开始模板.
angularjs-gulp-browserify-boilerplate - 一个使用AngularJS, Sass, gulp, 和 Browserify技术的开始模板.
hapi-ninja - 一个使用Node.js, Hapi, and Swig技术的开始模板.
laravel-5-boilerplate - 一个Laravel 5 开始模板.
react-starterkit - 包含react-router, Reflux, jest, webpack, gulp and Stylus的React开始模板.

二、Yeoman生成器
generator-gulp-webapp - A 一个流行的web应用的gulp生成器.
generator-gulp-angular - 使用Gulp的AngularJS 的Yeoman生成器.
generator-react-gulp-browserify - 一个React库的Yeoman生成器,包含gulp, Browserify, Browsersync and Bootstrap.
generator-node-gulp - 一个Node.js模块生成器,包含gulp和 Mocha.
generator-gulp-bootstrap - 一个包含Bootstrap, gulp 和libsass的Yeoman生成器·.
generator-angulpify - 一个包含AngularJS, gulp和Browserify的Yeoman生成器.
generator-ionic-gulp - 一个Ionic工厂的Yeoman生成器.
generator-gulp-plugin-boilerplate -一个输出 gulp plugin boilerplate的脚手架.
generator-jekyllized - 一个包含gulp, Sass, AutoPrefixer,资源优化,缓存等的Jekyll工作流.

三、其他
elixir - 一个为你的应用定义基本的gulp任务的干净、灵活的API.
gulp-app - 将Gulp作为一个应用(OS X).
lmn-gulp-tasks - gulp任务的单元测试示例.
gulp-chef - 一个优雅的、简单的重复使用gulp task的方法.

做一个合格的前端,gulp资源大集合相关推荐

  1. 对不起,我骗了你,我不是一个合格的前端工程师

    我是一个梅州人,在深圳上班,从上图可以看出我是一个大专生,其实不是的,我欺骗了大家,我是06年高中毕业,因为读书偷懒,并没有考上一个好的大学,结果阴差阳错的跑去茂名读了一个中专,读中专的时候并没有好好 ...

  2. 极客Web前端开发资源大荟萃

    每周极客都将总结本周最精彩的素材提供给大家,希望可以带给你更多地灵感和帮助!极客#GB课程库#现已上线,无论你是初级.中级.还是正在进修的高级前端工程师.这里都将帮助你得到更多更高效的学习. #GB课 ...

  3. 艾伟也谈项目管理,如何做一个合格的项目经理

    项目经理这个角色说大不大,说小也不小.在大公司,项目经理这样的角色可能存在不计其数,他们很多都是寄托于项目的存在而生,项目的完成而终:但对于一些小作坊的软件公司,项目经理一职很多时候是一个长期持有的过 ...

  4. 要怎么样做一个合格点的程序猿呢?

    要怎么样做一个合格点的程序猿呢? 把编程当做人生来看,磨刀不误砍柴工.看完设计模式以后,就算以后设计不出很精巧的模式,我也会先仔细想好,仔细研究透了需求,分析透了设计,再写代码,不然的话,后期的维护, ...

  5. 论坛软文撰写技巧之做一个合格的标题党

    论坛软文撰写技巧之做一个合格的标题党 好的标题是论坛营销成功的关键 好的标题是论坛营销成功的关键,这话不是空穴来风. 2008年四川地震后全国人民都在心系灾区的同胞并踊跃的捐款,而王石和他的万科集团因 ...

  6. 自媒体怎么做搬运?怎样做一个合格的自媒体视频搬运工?

    今天不聊什么别的东西,就聊一聊自媒体视频,怎样才能更好的搬运更有利于我们操作与赚到自己想要的那部分钱. 股神巴菲特曾经说过一个非常经典的话:人生就像滚雪球一样,重要的是发现构思的雪和一道够长的山坡,如 ...

  7. 做一个聪明的前端开发者

    那么什么是聪明者,就是打架不出拳,直接用刀砍,或者更牛逼的就开枪! 那么如何做一个聪明的前端开发者? 很显然,就是用工具代替手工,用自动代替手动! 那到底是用什么工具呢,如下: 前端开发工具 工具有点 ...

  8. 做一个好管家 Linux系统管理技巧大荟萃

    做一个好管家 Linux系统管理技巧大荟萃 [上海央邦]学一送一,超值! 必读版<十一攻破RHCE6.0.OCP>安博亚威]CCIE考试通过率第一! Cisco网络技术系列讲座 试听一个月 ...

  9. 公开课:如何做一个合格的网络编辑

    摘要 互联网的高速发展,催生了许多热门职业.如常规的编辑岗位,因为加上了互联网的标签而多了更多属性.本季<腾讯职播间>倾力打造互联网热门职位揭秘课程,为想要进入互联网工作的你,提供最有力的 ...

最新文章

  1. 控件的实际大小与呈现大小
  2. 数据结构例程——线性表顺序存储的应用
  3. [学习笔记]matlab
  4. redissession有容量上限吗_传输线的功率容量
  5. 里氏替换原则→类型转换
  6. (7) ebj学习: jpa 一对一,一对多,多对多
  7. Java Double类hashCode()方法及示例
  8. 用博弈论的思想玩游戏(洛谷P3150题题解,Java语言描述)
  9. 美团面试题:缓存一致性,我是这么回答的!
  10. Weblogic跨域session冲突解决办法
  11. linux+top写日志,Linux:日志那些命令
  12. hadoop异常: java.io.EOFException: Unexpected end of input stream
  13. MT9 二维数组打印(Python)
  14. ChinaITLab-Linux工程师培训课程笔记2
  15. Java读文件的三种方式
  16. 路由器怎么设置WiFi短信认证?
  17. 计算机专业必须用英语口语要求,哪些专业需要英语口语考试
  18. 有没有永久免费的云服务器?看完这篇文章你就明白了!
  19. ibm大型机服务器虚拟化,PowerVM:IBM小型机虚拟化的利器
  20. ios 默认字体加粗

热门文章

  1. 计算机自动管理,停车管理系统全部采用计算机自动管理
  2. 红外热像仪的军事应用-安泰维修分享
  3. TCP/IP 与 DBUS 发送数据速度对比 进程间通信
  4. VSCode快捷键的使用
  5. 浅谈在centos中使用docker部署war包项目(jsp篇)
  6. [IOS APP]推拿-毕飞宇有声小说
  7. 模拟开关-相关参数学习
  8. 计算机设备购置论证制度,西安交通大学大型仪器设备购置论证实施细则(西交实〔2018〕49号)...
  9. Linux虚拟机cannot resolve hostname问题
  10. 唯样商城:ROHM——反向恢复时间trr的影响逆变器电路的优化