Skip to content

arif-dewi/essential-gulp-plugins

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 

Repository files navigation

##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 and benchmark 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.

main-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.

gulp-plumber - prevents pipe breaking caused by errors from 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.

About

Living list of most useful plugins for Gulp

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published