承接前一篇《 》故而整理了如下gulp插件资源大全。 **【我的新作观点网： (观点网是一个猎获新奇、收获知识、重在独立思考的网站)。 PS：接下来我会逐一开源观点网开发过程中的前后端技术，如：lucene全文索引、自定义富文本编辑器、图片上传压缩水印等等。】**
之前我也整理过一篇《》,有小伙伴留言说”能有链接就好了“，因此这次整理gulp相关资料的时候，特意录入了插件地址，方便小伙伴们查找学习。
通用资源
官方文档
组织
Gulp入门
Gulp 4 入门
Gulp with Browserify
Gulp with Angular
Gulp with Angular and Browserify
Gulp with React and Browserify
Gulp with Ember
其他资源
gulp插件部分
一、编译
- 通过 libsass将Sass编译成 CSS - 通过 Ruby Sass将Sass编译成CSS - 通过 Ruby Sass和CompassSass编译成CSS - Less编译成 CSS. - Stylus 编译成 CSS. - Pipe CSS 通过 PostCSS processors with a single parse. - Coffeescript 编译成 JavaScript. - TypeScript编译成JavaScript. - Facebook React JSX 模板编译成JavaScript. - 将webpack集成在Gulp中使用。 - ES6编译成ES5 通过 babel. - ES6编译成ES5 通过 Traceur. - ES6编译成ES5 通过 Regenerator. - Myth - a polyfill for future versions of the CSS spec.二、合并
- 合并文件.三、压缩
- 压缩 CSS 通过 clean-css. - 压缩 CSS 通过 CSSO. - 压缩 JavaScript 通过 UglifyJS2. - 压缩 HTML 通过 html-minifier. - 压缩 HTML 通过 Minimize. - 压缩 PNG, JPEG, GIF and SVG 图片 通过 imagemin. - 通过Gulp压缩 SVG 文件四、优化
- 移除未使用的CSS选择器通过 UnCSS. - 将CSS文件中所有的资源(有url()声明的)变成base64-encoded 数据的URI字符串 - 将SVGs转换成PNGs - 生成不同尺寸的图片 -将svg files 合并成一个通过 元素 - 通过SVG icons创建 icon fonts五、资源注入
- 解析HTML文件中特殊标签里面的script或style标签，合并成一个script或css文件，并替换。 - 将指定的css或js文件以标签的形式插入到HTML中的指定标志内。 - 将Bower依赖自动注入HTML文件中。六、模板
- 在$templateCache中联系并注册AngularJS模板 - Jade 转换成 HTML. - Handlebars模板转换成 JavaScript. - Handlebars 模板转换成 HTML. - Nunjucks模板转换成JavaScript. - Dust模板转换成JavaScript. - Riot模板转换成JavaScript. - Markdown → HTML. - Lodash 模板转换成JavaScript. - Swig模板转换成HTML. - Gulp plugin for [remark]的Gulp插件( 通过插件处理markdown七、代码校验
- 通过CSSLint自动校验CSS. - 通过HTMLHint校验HTML. - 通过JSHint发现错误和潜在的问题. - 通过jscs检查JavaScript代码风格. - 一种用来保证CoffeeScript代码风格统一的检查。 - gulp的TypeScript代码校验插件. - ECMAScript/JavaScript代码校验. - 通过w3cjs检验HTML. - 通过lesshint校验LESS.八、实时加载
- 保证多个浏览器或设备网页同步显示 (recipes). - Gulp的实时加载插件.九、缓存
- 仅让发生改变的文件通过. - 一个简单的文件内存缓存. - 记忆并回收通过了的文件. - 只让新的源码通过.十、流控制
- 合并多个流到一个插入的流. - 逐渐输入队列的流. - 按要求运行一些依赖的Gulptask. - 按照条件运行task.十一、日志
- Gulp的通知插件. - 显示你的项目的大小. - 通过调试文件流来观察那些文件通过了你的Gulp管道.十二、测试
- 运行Mocha测试用例. - 在Node.js中运行Jasmine 2 测试用例. - 为Protractor测试用例包裹Gulp. - 为Node.js覆盖相对于运行的测试运行独立的报告. - 通过Gulp运行Karma测试用例.- 通过Gulp运行AVA 测试用例.十三、其他插件
- 包含一系列有用插件. - 防止错误引起管道中断Prevent pipe breaking caused by errors. - 自动加载Gulp插件. - 构建时自动获取bower库的文件. - 解析CSS且根据规则添加浏览器兼容性前缀. - 提供source map支持. - Gulp的一个字符串替换插件. - 轻松重命名文件. - 在静态文件名的后面添加hash值，如: unicorn.css → unicorn-d41d8cd98f.css. - 使用globs删除文件/文件夹. - 运行一个shell命令. - 除去javascript代码中的console,alert,debugger声明. - 解析CSS文件，找到imports,将连接文件替换成imort声明. - 将HTML中的css属性放到style标签中. - 将内容发布到GiHub有页面. - 通过ng-annotate添加Angular依赖注入. - 通过Gulp Bump任何semvar JSON版本. - 通过Gulp Include文件. - 以ZIP格式压缩文件. - 通过Gulp运行git命令. - 使用globbing过滤文件. - 基于自定义内容或环境配置预处理文件.脚手架
一、模板
- Google的Web Starter Kit. - 创建Gulp插件的开始模板. -Polymer 1.0 应用的起点. - 同构的web应用最全面的React/Flux开发栈和开始模板. - 开发响应式HTML5/Sass项目的最小开始模板. 一个轻量级的、移动端优先的前端开发开始模板. - 一个使用AngularJS, Sass, gulp, 和 Browserify技术的开始模板. - 一个使用Node.js, Hapi, and Swig技术的开始模板. - 一个Laravel 5 开始模板. - 包含react-router, Reflux, jest, webpack, gulp and Stylus的React开始模板.二、Yeoman生成器
- A 一个流行的web应用的gulp生成器. - 使用Gulp的AngularJS 的Yeoman生成器. - 一个React库的Yeoman生成器，包含gulp, Browserify, Browsersync and Bootstrap. - 一个Node.js模块生成器，包含gulp和 Mocha. - 一个包含Bootstrap, gulp 和libsass的Yeoman生成器·. - 一个包含AngularJS, gulp和Browserify的Yeoman生成器. - 一个Ionic工厂的Yeoman生成器. -一个输出 gulp plugin boilerplate的脚手架. - 一个包含gulp, Sass, AutoPrefixer,资源优化，缓存等的Jekyll工作流.三、其他
- 一个为你的应用定义基本的gulp任务的干净、灵活的API. - 将Gulp作为一个应用(OS X). - gulp任务的单元测试示例. - 一个优雅的、简单的重复使用gulp task的方法.