最有用的Gulp插件汇总

HTML&CSS

autoprefixer - parse CSS and add vendor prefixes to rules by Can I Use.

gulp-browser-sync - keep multiple browsers & devices in sync when building websites.

gulp-useref - parse build blocks in HTML files to replace references to non-optimized scripts or stylesheets.

gulp-email-design - a workflow for designing and testing HTML email templates.

gulp-uncss - remove unused CSS from your projects.

gulp-csso - very cool CSS minificator. In addition, there are many CSS optimizers andbenchmark tests (GitHub) for them. But recently I saw most powerful Shorthand utility without Gulp, which does folowing:

a {
    font-family: Arial;
    font-style: italic;
    font-size: 14px;
    line-height: 18px;
    font-weight: bold;
    background-image: url(‘example.png‘);
    background-color: red;
    background-size: cover;
    background-repeat: no-repeat;
}

=>

a {
  font: italic bold 14px/18px Arial;
  background: red url(‘example.png‘) no-repeat / cover;
}

gulp-htmlmin - neat HTML minificator.

gulp-csscomb - refines the structure of your CSS.

gulp-csslint - CSS linter.

gulp-htmlhint - HTML validator.

gulp-processhtml - Process html files at build time to modify them as you wish.

JavaScript

gulp-autopolyfiller - precise polyfills. This is like Autoprefixer, but for JavaScript polyfills.

gulp-babel - transpiler for writing next generation JavaScript.

gulp-jsfmt - for formatting, searching, and rewriting JavaScript.

gulp-jscs - for checking JavaScript Code Style.

gulp-modernizr - build out a lean, mean Modernizr machine.

gulp-express — start (and supervise) an Express.js web server using, works well with socket.io

gulp-requirejs and gulp-browserify - optimize the work with RequireJS and Browserify respectively.

gulp-plato - generate static analysis reports.

gulp-complexity - evaluates code maintainability using Halstead and Cyclomatic metrics.

fixmyjs - automatically fix silly lint errors with help of JSHint (gulp-jshint).

gulp-jscpd — copy/paste detector for programming source code.

gulp-buddy.js - magic number detection for javascript.

gulp-jsonlint - JSON validator.

gulp-uglify - JavaScript compressor.

gulp-concat - concatenate files.

Unit Tests

Graphics

gulpicon - mystical CSS icon solution.

gulp-iconfont - SVG to webfont converter.

gulp-responsive - produce images at different sizes for responsive websites.

gulp-sharp - fastest module for work JPEG, PNG, WebP and TIFF images.

gulp-svgstore - merge SVGs from a folder.

gulp-imacss - application and library that transforms image files to data URIs.

gulp-imagemin и gulp-tinypng or fimage compression.

gulp-spritesmith - converting a set of images into a spritesheet and corresponding CSS variables.

Others

gulp-grunt - able to run Grunt tasks from Gulp.

gulp-watch — run tasks whenever watched files change.

gulp-notify - automatic error messages in system notifications center when Gulp tasks fail.

gulp-git - able to use Git commands.

gulp-jsdoc - generate JavaScript documentation by running JSDoc3.

gulp-rev - static file asset revisioning through content hashing.

gulp-bump - increments versions in package JSON and gulp-update, which automatically updates packages.

gulp-bower-files - inject Bower packages.

gulp-removelogs - remove console logging statements.

gulp-preprocess - preprocess files based off environment configuration.

gulp-duration — displays the elapsed execution time of Gulp tasks.

gulp-changed and gulp-newer — run Gulp tasks with only those source files modified since the last successful run.

gulp-connect - simple static web server.

gulp-shell - run Shell commands.

gulp-ssh - provides the ability to connect via SSH and SFTP.

gulp-zip - compress files and folders..

gulp-clean and gulp-copy - respectively remove and copy sources.

gulp-replace - Search and replace strings in text files.

gulp-filesize - displays sizes of files in a readable format.

gulp-util - utilities for developing Gulp plugins.

Compilers

Finally

  • psi - PageSpeed Insights with reporting.
  • tmi - TMI (Too Many Images) - discover your image weight on the web.
  • ngrok - Introspected tunnels to localhost.
  • pageres - responsive website screenshots.
  • matchdep - filter npm module dependencies.
  • Maybe some automatization methods you want to use directly in the editor, so look at the The Best Plugins for Sublime Text.

https://github.com/Pestov/essential-gulp-plugins

时间: 2024-12-24 21:05:05

最有用的Gulp插件汇总的相关文章

常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本的了解.如果你对 Gulp 还不是很了解,可以通过下面两篇文章快速了解 Gulp . 由于几乎所有的插件都有非常友好的使用文档,所以本文不讨论涉及插件使用的东西,仅是一个汇总.排名不分先后. 本系列文章导航: 一.基于 Gulp 的前端集成解决方案 —— 在windows下安装gulp 二.基于 G

Gulp 插件

Gulp 插件 前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本的了解.如果你对 Gulp 还不是很了解,可以通过下面两篇文章快速了解 Gulp . 由于几乎所有的插件都有非常友好的使用文档,所以本文不讨论涉及插件使用的东西,仅是一个汇总.排名不分先后. 本系列文章导航: 一.基于 Gulp 的前端集成解决方案 —— 在windows下安装gul

Android?Studio?优秀插件汇总

第一部分 插件的介绍 Google 在2013年5月的I/O开发者大会推出了基于IntelliJ IDEA java ide上的Android Studio.AndroidStudio是一个功能齐全的开发工具,还提供了第三方插件的支持.让开发人员更快速更好的开发程序. 第二部分 插件的安装 in Android Studio: go to File → Settings → Plugins → Browse repositories and search for 插件名 or in Androi

拿走不谢!22 个 Android Studio 优秀插件汇总

Google 在2013年5月的I/O开发者大会推出了基于IntelliJ IDEA java ide上的Android Studio.AndroidStudio是一个功能齐全的开发工具,还提供了第三方插件的支持.让开发人员更快速更好的开发程序. 插件的安装 in Android Studio: go to File → Settings → Plugins → Browse repositories and search for 插件名 or in Android Studio: go to

Android Studio插件汇总

转载:https://github.com/dreamlivemeng/androidstudio-plugins AndroidStudio 优秀插件汇总 欢迎大家推荐好的 Android 开源项目,可直接Commit,欢迎Star.Fork :) 第一部分 插件的介绍 Google 在2013年5月的I/O开发者大会推出了基于IntelliJ IDEA Java IDE上的Android Studio.AndroidStudio是一个功能齐全的开发工具,还提供了第三方插件的支持.让开发人员更

gulp插件的使用方法

gulp插件很多,这里介绍几个比较常用的插件... 1.gulp-less:用于把less文件编译成css文件. 因为html文件中不能直接引用less文件(需要导入相关编译js文件配合才行),因此需要想方设法把相应less文件编译成less文件编译成css文件.除了考拉编译外,还可以通过gulp这个自动化构建工具实现less文件的编译. 在用gulp编译前,首先你需要安装node.js.gulp是基于node.js,理所当然需要安装node.js.npm(node package manage

如何编写一个gulp插件

很久以前,我们在"细说gulp"随笔中,以压缩JavaScript为例,详细地讲解了如何利用gulp来完成前端自动化. 再来短暂回顾下,当时除了借助gulp之外,我们还利用了第三方gulp插件”gulp-uglify”,来达到压缩JavaScript文件的目的. 代码如下: 今儿,我们的重点就是,自己也来实现一个gulp插件. 正文 其实,如果只是单纯地想要编写一个gulp插件不难,可以借助through2或者through-gulp来编写(through-gulp是基于through

分页插件汇总

jpaginate是基于jquery的分页插件,非常轻量,没有任何侵入性,当然所能做的也就非常少.事实上它的作用仅仅是提供一个好看的分页样式,只提供一个触发事件.但是轻量带来了巨大的灵活性,让它可以提供任何内容的分页服务. 官方网站为http://tympanus.net/codrops/2009/11/17/jpaginate-a-fancy-jquery-pagination-plugin/,demo网站为http://tympanus.net/jPaginate/. 该项目好像到2009年

分享10款非常有用的 Ajax 插件

这篇文章与大家分享的是10款非常有用的 Ajax 插件,有用于图片的,用于分页的,还有用于导航的.这些作者的想法特别新颖,希望你能从中找到自己需要的插件. 1. AJAX-ZOOM 非常强大的一款插件,可用鼠标滚轮进行缩放,360° 旋转,全屏浏览等很多功能,在线演示 2. VerticalSlider 用于显示长列表的很好的方式,以Ajax方式加载,在线演示 3. More plugin 一款实现更多功能的插件,可用于显示更多评论,也可用于显示后面多少篇博文等,在线演示 4. HTML5 dr