欢迎光临
我们一直在努力

最有用的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

赞(0)
版权归原作者所有,如有侵权请告知。达维营-前端网 » 最有用的Gulp插件汇总

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址