Most Wanted Gulp Plugins



    This post can be said is a duplicate of my previous collection, “The most necessary plugins for Grunt” . The fact is that after many hours of searching, I did not find cool plugins for Gulp, which are not for Grunt with the exception of a couple of very specific utilities. It's just the opposite, but I couldn’t ignore the many Gulp users. I highlighted all the missing plugins because Gulp can use them from Grunt, as well as Grunt from Gulp.

    Good day to all! Someone smart, I don’t remember which article on Habré, just recently thought about the development process with an explicit call to automate everything that can be automated. And it is better to spend time on automation once, in order to later save it throughout the entire project.

    Web developers have a great tool for automating a ton of tasks called Gulp. And my passion for taxonomy forced myself to put together a huge collection of almost 100 valuable plugins for this collector. I think many who already use Gulp will find something for themselves, and who are not, looking at the possibilities, they will get good motivation to install it and understand how this thing works.

    I also posted a selection on GitHub so everyone can add to the collection.

    HTML & CSS



    autoprefixer is one of the most useful plugins that automatically prefixes CSS properties based on caniuse statistics . It is important to say that AutoPrefixer is just one of many add-ons within the framework of the PostCSS project from Evil Martians.

    gulp-browser-sync is probably the most useful tool in terms of improving the productivity of web developers. BrowserSync creates a connection, after which it automatically updates the page in all browsers on all devices when changing not only client or even server files. Plus, it synchronizes the scroll position and the completed data in forms.

    gulp-useref - parses specific blocks and concatenates the styles and scripts described in them.

    gulp-email-design is an invaluable tool for typesetting letters, which converts all CSS styles to inline ones, automatically changing all paths to files, optionally can upload images to CDN and even send letters to e-mail.

    gulp-uncss is the best solution for optimizing CSS files. The plugin analyzes HTML code and finds all unused and duplicated styles.

    gulp-csso is a great CSS minifier. Today, there are a number of CSS compressors and a comparison table (GitHub) for them. But recently, I saw the best Shorthand utility without Gulp, which does something like this:

    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 is a simple HTML minifier.

    gulp-csscomb - ennobles the structure of your CSS.

    gulp-csslint - CSS linter.

    gulp-htmlhint - HTML validator.

    Javascript



    gulp-autopolyfiller is a mega cool plugin that is similar to Autoprefixer and picks up all the necessary polyphiles for JavaScript so you can use the latest ECMAScript standards today. I also recommend gulp-babel , which converts ES6 / ES7 to ES5.

    gulp-jsfmt is the most useful JavaScript plugin from the Rdio team, which allows you to search for specific fragments, format and make massive changes to the code. There is also a gulp-jsbeautifier .

    gulp-jscs - JavaScript Code Style. A wonderful tool with many configurations for checking your code against existing style guides from jQuery, Yandex, Google, Airbnb and others.

    gulp-modernizr- Helps to draw up the correct architecture of the project based on Modernizr.js depending on the capabilities of the browser.

    gulp-express - launches Express.js web server.

    gulp-requirejs and gulp-browserify - optimize RequireJS and Browserify, respectively.

    gulp-plato - provides analytics for your code with different metrics in the form of beautiful graphs.

    gulp-complexity - code quality checking based on Halstead and Cyclomatic algorithms.

    fixmyjs - automatically fix simple errors in code after a lint executed based on JSHint ( gulp-jshint ).

    gulp-jscpd - to search for duplicates in the code.

    gulp-jsonlint - JSON file validator.

    gulp-uglify - JavaScript compressor.

    gulp-concat - file concatenation.

    Unit tests





    Graphics



    gulpicon is a valuable plugin that allows you to generate sprites from SVG, convert them to PNG, write all Data URIs and connect the desired format depending on the capabilities of the browser.

    gulp-iconfont is a great plugin for working with web fonts. Able to create WOFF, WOFF2, EOT, TTF files from SVG.

    gulp-responsive is an easy way to generate responsive images for the required device resolutions with the appropriate prefixes in the name.

    gulp-sharp is the fastest module for working with JPEG, PNG, WebP and TIFF images. The plugin can change the size, orientation, background, alpha channel and much more.

    gulp-svgstore - merges all connected SVG files and writes them in HTML asfor further usage.

    gulp-imacss is a very convenient utility that automatically converts PNG, JPG, SVG images connected to CSS to Data URI.

    gulp-imagemin and gulp-tinypng for image compression.

    gulp-spritesmith - automatic sprite generation.

    Miscellaneous



    gulp-grunt - allows you to run Grunt plugins for Gulp.

    Some of the missing:

    grunt-html-build is a universal layout assistant. The plugin is able to combine source files and create complete templates / blocks for your HTML. Still for similar tasks grunt-include-replace is very good .

    grunt-penthouse and grunt-criticalcss - automatically find the Critical Path in your project. An important point in terms of performance, which is described in more detail here .

    grunt-shipit - Automates deploy with Shipit.

    grunt-githooks - binds Git Hooks to Grunt tasks.

    grunt-gitbook - create documentation with the awesome GitBook utility.

    grunt-conventional-changelog- Generates a list of changes based on commits in Git.

    grunt-proxy and grunt-connect-proxy - connect support for proxying API calls during development.

    grunt-phantomas is an excellent tool for measuring project performance.

    grunt-usebanner - adds banners (copyright or ASCII headers) in the source files and grunt-figlet to help work with this.


    gulp-watch is the cornerstone of the Gulp plugin system. It monitors all specified files or entire directories and, in case of any changes, performs tasks described in the configurations.

    gulp-notify - displays errors when building Gulp in the form of system messages, and most importantly, what works for different operating systems.

    gulp-git - allows you to use git commands.

    gulp-jsdoc is a documentation generator based on JSDoc3.

    gulp-rev is a useful revision plugin.

    gulp-release - allows you to control the versions in your project.

    gulp-bump - monitors the repository and updates package.json and gulp-update , which updates the packages themselves.

    gulp-bower-files - connects all the necessary Bower components.

    gulp-removelogs - automatically removes logs.

    gulp-preprocess is a preprocessor that refers to installed configurations.

    gulp-duration - displays the execution time of tasks.

    gulp-changed and gulp-newer - run tasks only for changed files.

    gulp-connect is a simple web server for static sites.

    gulp-shell - allows you to run Shell commands.

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

    gulp-zip - archives folders and files.

    gulp-clean and gulp-copy- respectively, clean and copy the specified source.

    gulp-filesize - Displays file sizes in a readable format.

    gulp-util - various utilities for developing Gulp plugins.

    Compilers



    gulp-less - LESS in CSS.
    gulp-sass - SASS / SCSS in CSS.
    gulp-compass - SASS with Compass in CSS.
    gulp-stylus - Stylus in CSS.
    gulp-coffee - CoffeeScript in JavaScript.
    gulp-jade - Jade in HTML.
    gulp-handlebars - Handlebars templates in JST.
    gulp-jst - Underscore templates in JST.
    gulp-react - Facebook React's JSX templates in JST.
    gulp-nunjucks - Nunjucks templates in JST.
    gulp-dustjs - Dust templates in JST.
    gulp-angular-templatecache - AngularJS templates in JST.

    In the end



    psi - PageSpeed ​​Insights with reporting.
    tmi - TMI (Too Many Images) - discover your image weight on the web.
    ngrok - Introspected tunnels to localhost.
    pageres is a handy utility for creating screenshots of sites in different resolutions.
    Perhaps some automation methods will be more convenient for you to use directly in the editor - Best plugins for SublimeText.
    matchdep - helps to correctly describe dependencies.

    Also popular now: