Gulp插件收藏

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


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
坚持原创技术分享,您的支持将鼓励我继续创作!