{"id":17140451,"url":"https://github.com/adam-lynch/gulp-image-data-uri","last_synced_at":"2025-04-13T10:34:37.901Z","repository":{"id":22504956,"uuid":"25845068","full_name":"adam-lynch/gulp-image-data-uri","owner":"adam-lynch","description":"Converts images to data URIs","archived":false,"fork":false,"pushed_at":"2022-05-02T15:03:01.000Z","size":444,"stargazers_count":12,"open_issues_count":3,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-27T01:51:31.919Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://www.adamlynch.com","language":"CoffeeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adam-lynch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-10-28T00:03:08.000Z","updated_at":"2022-05-02T15:00:55.000Z","dependencies_parsed_at":"2022-08-21T07:00:18.490Z","dependency_job_id":null,"html_url":"https://github.com/adam-lynch/gulp-image-data-uri","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adam-lynch%2Fgulp-image-data-uri","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adam-lynch%2Fgulp-image-data-uri/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adam-lynch%2Fgulp-image-data-uri/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adam-lynch%2Fgulp-image-data-uri/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adam-lynch","download_url":"https://codeload.github.com/adam-lynch/gulp-image-data-uri/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248305839,"owners_count":21081574,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-14T20:14:51.118Z","updated_at":"2025-04-13T10:34:37.882Z","avatar_url":"https://github.com/adam-lynch.png","language":"CoffeeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"gulp-image-data-uri \n==========\n\n[![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Windows Build Status][appveyor-image]][appveyor-url] [![Dependency Status][depstat-image]][depstat-url] \n\n---\n\nA [Gulp](http://github.com/gulpjs/gulp) plugin for converting images to inline data-URIs. Intended to be a simple single-purpose wrapper for [heldr/datauri](https://github.com/heldr/datauri) (well, [datauri.template](https://github.com/heldr/datauri.template)).\n\n# Installation\n```js\nnpm install gulp-image-data-uri\n```\n\n# Usage for Gulp ^4.0.0\n```js\nconst gulp = require('gulp'),\n      imageDataURI = require('gulp-image-data-uri');\n\n// path variables\nvar imgSrc = 'src/img/*',\n    cssDist = 'dist/css/',\n\n// the task\nexports.datauri = function () {\n    return src (imgSrc)\n    .pipe(imageDataURI())\n    .pipe(dest(cssDist))\n}\n```\n\n# The Ol' fashion way\n**Reminder:** The [`task()`](https://gulpjs.com/docs/en/api/task) API isn't the recommended pattern anymore - export your tasks as shown above.\n\n```js\nvar gulp = require('gulp');\nvar imageDataURI = require('gulp-image-data-uri');\n\ngulp.task('prepare', function() {\n    gulp.src('./images/*')\n        .pipe(imageDataURI()) \n        .pipe(gulp.dest('./dist'));\n});\n\ngulp.task('default', ['prepare']);\n```\n\nFor example output, see [test/expected](test/expected). See [Examples](#examples) for more information. \n\n# Options\n\n### customClass\n\nAn optional function. If omitted, the class added is just the file's basename.\n\nThe function is called with two arguments; the default class name and the [Vinyl](http://github.com/wearefractal/vinyl) file object. It must *return* the new class (string). See [Examples](#examples) for more information.\n\n### template\n\nAn optional object. See the [Custom CSS template examples](#custom-css-templates) below.\n\n#### template.file\n\nA string which is a path to a template file (note: this doesn't have to be a `.css` file). This must be given if you want to use a custom template. An example file:\n\n```css\n.{{className}} {\n    background: url(\"{{dataURISchema}}\");\n}\n```\n\nThe `className` and `dataURISchema` variables will always be passed to your template.\n\n- `className` is the name of the file or if you use the `customClass` option then it's whatever your function returns.\n- `dataURISchema` is the data URI.\n\nNote: `classNameSuffix` is also reserved (by a module used underneath) but don't use it.\n\n### template.variables\n\nAn optional object of variable names to variables like this:\n\n```javascript\n{\n    defaultMargin: '.1rem'\n}\n```\n\nThese will be passed to your template along with the `className`, `dataURISchema` and `classNameSuffix` variables this module gives you (these are reserved variables).\n\n### template.engine\n\nAn optional function which accepts the data (as an object) as its only parameter and returns a string.\n\nConsider lodash.template as example. If your favorite templating engine does support a compile + render shorthand, you just need to point the handler after a given template path, otherwise you will need to create a template adapter.\n\n### template.adapter\n\nAn optional function which accepts the template content (string) as its only parameter and returns a template function (or engine).\n\nSome templating engines do not have a shorthand to compile + render at the same call. In this specific case we can create a template wrapper as the example below:\n\n\n# Examples\n\nFor example output, see [test/expected](test/expected).\n\n- [Combining into one CSS file](examples/combine-into-one-css-file.md)\n- [Custom classes](examples/custom-classes.md)\n- [Including / excluding certain images](examples/including-or-excluding-certain-images.md)\n\n## Custom CSS templates\n\nThese examples expand on the [Combining into one CSS file](examples/combine-into-one-css-file.md) example but you don't have to concatenate them if you like.\n\n- [Custom template](examples/custom-template.md)\n- [Custom template with variables](examples/custom-template-with-variables.md)\n- [Custom template and templating engine](examples/custom-template-and-templating-engine.md)\n- [Custom template and template adapter](examples/custom-template-and-template-adapter.md)\n\n# Contributing\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md)\n\n## Anything missing?\n\nCreate an [issue](https://github.com/adam-lynch/gulp-image-data-uri/issues) / [pull-request](https://github.com/adam-lynch/gulp-image-data-uri/pulls) :smiley:.\n\n[npm-url]: https://npmjs.org/package/gulp-image-data-uri\n[npm-image]: http://img.shields.io/npm/v/gulp-image-data-uri.svg?style=flat\n\n[travis-url]: http://travis-ci.org/adam-lynch/gulp-image-data-uri\n[travis-image]: http://img.shields.io/travis/adam-lynch/gulp-image-data-uri.svg?style=flat\n\n[appveyor-url]: https://ci.appveyor.com/project/adam-lynch/gulp-image-data-uri/branch/master\n[appveyor-image]: https://ci.appveyor.com/api/projects/status/f34nrrstjmctvuj0/branch/master?svg=true\n\n[depstat-url]: https://david-dm.org/adam-lynch/gulp-image-data-uri\n[depstat-image]: https://david-dm.org/adam-lynch/gulp-image-data-uri.svg?style=flat\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadam-lynch%2Fgulp-image-data-uri","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadam-lynch%2Fgulp-image-data-uri","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadam-lynch%2Fgulp-image-data-uri/lists"}