承接前一篇《
做一个及格的前端,gulp自动化构建东西入门教程》故而整顿了以下gulp插件资本大全。**【我的新作看法网:
http://www.guandn.com (看法网是一个猎获新颖、收成学问、重在自力思考的网站)。PS:接下来我会一一开源看法网开辟过程当中的前后端手艺,如:lucene全文索引、自定义富文本编辑器、图片上传紧缩水印等等。】**
之前我也整顿过一篇《javascript功用插件大集合》,有小伙伴留言说”能有链接就好了“,因而此次整顿gulp相干材料的时刻,特地录入了插件地点,轻易小伙伴们查找进修。
官方文档
疾速最先
API文档
CLI 文档
最先写一个插件
运用窍门
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-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的要领.