常用的gulp插件

    xiaoxiao2021-03-25  75

    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 gulp-nodeunit gulp-jasmine gulp-qunit gulp-mocha gulp-karma 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 gulp-less - LESS in CSS. gulp-sass - SASS/SCSS in СSS. gulp-compass - SASS with Compass in CSS. gulp-stylus - Stylus in CSS. gulp-coffee - CoffeeScript in JavaScript. gulp-typescript - TypeScript 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. 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

    转载请注明原文地址: https://ju.6miu.com/read-39790.html

    最新回复(0)