作一个合格的前端,gulp资源大集合

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

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

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

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

组织
StackOverflow
Twitter前端

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

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

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

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

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

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

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

其余资源
Gulp 备忘录
Gulp清单

gulp插件部分

1、编译
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.

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

3、压缩
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 文件

4、优化
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

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

6、模板
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

7、代码校验
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.

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

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

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

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

12、测试
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 测试用例.

十3、其余插件
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 - 基于自定义内容或环境配置预处理文件.

脚手架

1、模板
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开始模板.

2、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工做流.

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

相关文章
相关标签/搜索