gulp.spritesmith - Convert a set of images into a spritesheet and CSS variables via gulp

  •        12

This is the official port of grunt-spritesmith, the grunt equivalent of a wrapper around spritesmith. Alternative output formats include SASS, Stylus, LESS, and JSON.

https://github.com/twolfson/gulp.spritesmith

Dependencies:

async : ~2.1.5
minimatch : ~3.0.3
spritesheet-templates : ~10.2.0
spritesmith : ~3.3.0
through2 : ~2.0.3
underscore : ~1.8.3
url2 : ~1.0.4
vinyl : ~2.1.0

Tags
Implementation
License
Platform

   




Related Projects

grunt-spritesmith - Grunt task for converting a set of images into a spritesheet and corresponding CSS variables

  •    Javascript

Grunt task for converting a set of images into a spritesheet and corresponding CSS variables. As of grunt-spritesmith@4.5.0, retina spritesheets/templates are supported. See the Retina parameters section for more information.

gulp-svg-sprite - SVG sprites & stacks galore — Gulp plugin wrapping around svg-sprite that reads in a bunch of SVG files, optimizes them and creates SVG sprites and CSS resources in various flavours

  •    Javascript

This document covers only gulp specific installation and configuration aspects. For a full list of features and options, please see the svg-sprite manual. NOTICE: By default, svg-sprite doesn't send any files downstream unless you configure it. There are tons of options available — please see below for some basic examples. Also, you should possibly take care of errors that might occur.

spritesmith - Utility that takes sprites and converts them into a stylesheet and its coordinates

  •    Javascript

Convert images into spritesheets and coordinate maps. We have moved from result.image being a binary string to it being a Buffer. This is to use more canonical conventions in Node.js.

Sprite Vortex

  •    DotNet

Sprite Vortex aims to greatly reduce the time needed to create frame based sprite animations. It covers common and useful operations such as importing a spritesheet, building spritesheet from separate images , cutting frames, building animations and more. Developed in: C#.

wizardwar - Wizard War is an open-source multiplayer iOS game

  •    Objective-C

This is only required if you add a sprite to the sprite folders and need to re-publish the spritesheet. The compiled spritesheets are committed to the repository and should be good to go. If you have Texture Packer pro: run make to compile the images in the spritesheet directories into spritesheets. If you only have the free version, open the .tps files and hit publish.


gulp-svgstore - Combine svg files into one with symbol elements

  •    Javascript

Combine svg files into one with <symbol> elements. Read more about this in CSS Tricks article. If you need similar plugin for grunt, I encourage you to check grunt-svgstore.

svg-sprite - SVG sprites & stacks galore — A low-level Node

  •    Javascript

It comes with a set of Mustache templates for creating stylesheets in good ol' CSS or one of the major pre-processor formats (Sass, Less and Stylus). Tweaking the templates or even adding your own custom output format is really easy, just as switching on the generation of an HTML example document along with your sprite. For an up-to-date list of browsers supporting SVG in general respectively SVG fragment identifiers in particular (required for <defs> and <symbol> sprites as well as SVG stacks) please refer to caniuse.com.

gulp-responsive - gulp-responsive generates images at different sizes

  •    Javascript

gulp-responsive depends on sharp. Sharp is one of the fastest Node.js modules for resizing JPEG, PNG, WebP and TIFF images. If you are using Mac OS then before installing gulp-responsive you should install the libvips library. Further information and instructions can be found in the sharp installation guide.

gulp-bump - Bump any version in any file which supports semver with gulp (gulpjs.com)

  •    Javascript

gulp-bump v2 supports Any valid semver in any filetype. ####You can view more examples in the example folder.

gulp-rev-replace - Rewrite occurences of filenames which have been renamed by gulp-rev

  •    Javascript

Pipe through a stream which has both the files you want to be updated, as well as the files which have been renamed. For example, we can use gulp-useref to concatenate assets in an index.html, and then use gulp-rev and gulp-rev-replace to cache-bust them.

gulp-sass - SASS plugin for gulp

  •    Javascript

Sass plugin for Gulp. Before filing an issue, please make sure you have Updated to the latest Gulp Sass and have gone through our Common Issues and Their Fixes section.

gulp-clean-css - Minify css with clean-css.

  •    Javascript

This is just a simple gulp plugin, which means it's nothing more than a thin wrapper around clean-css. If it looks like you are having CSS related issues, please contact clean-css. Only create a new issue if it looks like you're having a problem with the plugin itself. See the CleanCSS options.

sprite-cow

  •    Javascript

Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css.

iSprite

  •    

Creates a sprite sheet and you can also add sprites

Sprite Sheet Packer

  •    

Sprite Sheet Packer is a fully featured tool for combining multiple individual images into a single, efficiently laid out image.

gulp-rename - Rename files easily

  •    Javascript

gulp-rename is a gulp plugin to rename files easily. gulp-rename provides simple file renaming methods.

gulp-if - Conditionally run a task

  •    Javascript

A ternary gulp plugin: conditionally control the flow of vinyl objects. Note: Badly behaved plugins can often get worse when used with gulp-if. Typically the fix is not in gulp-if.