gulp 插件

  1. gulp API
    1. gulp.src(globs[, options])
    2. gulp.dest(path[, options])
    3. gulp.task(name[, deps], fn)
    4. gulp.watch(glob [, opts], tasks), gulp.watch(glob [, opts, cb])
  2. Recipes
  3. gulp-browserify
  4. gulp-jshint
  5. gulp-jslint
  6. imagemin
  7. glup-sass
  8. browser-sync
  9. gulp-handlebars
  10. gulp-usemin
  11. gulp-uglify
  12. gulp-sourcemaps
  13. 其它一些关注度高的gulp插件
    1. gulp-inject
    2. gulp-header
    3. gulp-filter
    4. gulp-changed
    5. gulp-bower
    6. gulp-if
    7. gulp-replace
    8. gulp-shell
    9. gulp-exec
    10. gulp-install
    11. gulp-rename
    12. gulp-ignore
    13. gulp-util
    14. gulp-clean
    15. gulp-concat
    16. gulp-wrap
    17. gulp-declare

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

友情转载:  http://colobu.com/2014/11/17/gulp-plugins-introduction/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值