100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 做一个合格的前端 gulp资源大集合

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

时间:2021-12-14 14:47:08

相关推荐

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

承接前一篇《做一个合格的前端,gulp自动化构建工具入门教程》故而整理了如下gulp插件资源大全。

**【我的新作观点网: (观点网是一个猎获新奇、收获知识、重在独立思考的网站)。

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插件(/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的方法.

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。