{"id":17963014,"url":"https://github.com/sparanoid/grunt-assets-inline","last_synced_at":"2025-03-25T04:33:04.029Z","repository":{"id":36272660,"uuid":"40577127","full_name":"sparanoid/grunt-assets-inline","owner":"sparanoid","description":"A grunt task which takes a html file, finds all the css, js links and images, and outputs a version with all the css, js and images (Base64) written inline.","archived":false,"fork":false,"pushed_at":"2024-08-25T11:14:07.000Z","size":1053,"stargazers_count":12,"open_issues_count":5,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-09-19T07:16:57.222Z","etag":null,"topics":["assets-inline","css","grunt","grunt-plugin","inline","inline-svg"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/sparanoid.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-08-12T02:57:34.000Z","updated_at":"2022-07-01T20:48:10.000Z","dependencies_parsed_at":"2024-06-18T19:47:29.518Z","dependency_job_id":"f8be1650-4986-4d50-bc27-5e7a96443b65","html_url":"https://github.com/sparanoid/grunt-assets-inline","commit_stats":{"total_commits":170,"total_committers":16,"mean_commits":10.625,"dds":"0.33529411764705885","last_synced_commit":"9c562bec34f6ddf0375904ef2120b9f6e437488a"},"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sparanoid%2Fgrunt-assets-inline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sparanoid%2Fgrunt-assets-inline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sparanoid%2Fgrunt-assets-inline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sparanoid%2Fgrunt-assets-inline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sparanoid","download_url":"https://codeload.github.com/sparanoid/grunt-assets-inline/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221949884,"owners_count":16906484,"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":["assets-inline","css","grunt","grunt-plugin","inline","inline-svg"],"created_at":"2024-10-29T11:22:47.841Z","updated_at":"2024-10-29T11:22:48.654Z","avatar_url":"https://github.com/sparanoid.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# grunt-assets-inline\n[![Greenkeeper badge](https://badges.greenkeeper.io/sparanoid/grunt-assets-inline.svg)](https://greenkeeper.io/)\n[![Build Status](https://api.travis-ci.org/sparanoid/grunt-assets-inline.svg?branch=master)](https://travis-ci.org/sparanoid/grunt-assets-inline)\n[![Dependency Status](https://david-dm.org/sparanoid/grunt-assets-inline.svg)](https://david-dm.org/sparanoid/grunt-assets-inline)\n[![devDependency Status](https://david-dm.org/sparanoid/grunt-assets-inline/dev-status.svg)](https://david-dm.org/sparanoid/grunt-assets-inline#info=devDependencies)\n[![npm Version](https://img.shields.io/npm/v/grunt-assets-inline.svg)](https://www.npmjs.com/package/grunt-assets-inline)\n[![npm Downloads](https://img.shields.io/npm/dm/grunt-assets-inline.svg)](https://www.npmjs.com/package/grunt-assets-inline)\n\n\u003e A grunt task which takes a html file, finds all the css, js links and images, and outputs a version with all the css, js and images (Base64) written inline.\n\nThis is a fork of original [grunt-html-smoosher](https://github.com/motherjones/grunt-html-smoosher) by [Ben Breedlove](https://github.com/benbreedlove) with fixes and new features.\n\n## Getting Started\n\nIf you haven't used [Grunt](http://gruntjs.com/) before, be sure to check out the [Getting Started](http://gruntjs.com/getting-started) guide, as it explains how to create a [Gruntfile](http://gruntjs.com/sample-gruntfile) as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:\n\n```shell\nnpm install grunt-assets-inline --save-dev\n```\n\nOne the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:\n\n```js\ngrunt.loadNpmTasks('grunt-assets-inline');\n```\n\n## The \"assets_inline\" task\n\n### Overview\n\nIn your project's Gruntfile, add a section named `assets_inline` to the data object passed into `grunt.initConfig()`.\n\n```js\ngrunt.initConfig({\n  assets_inline: {\n    options: {\n      jsTags: { // optional\n        start: '\u003cscript type=\"text/javascript\"\u003e', // default: \u003cscript\u003e\n        end: '\u003c/script\u003e'                          // default: \u003c/script\u003e\n      },\n    },\n    all: {\n      files: {\n        'dest-index.html': 'source-index.html',\n      },\n    },\n  },\n});\n```\n\n### Options\n\n#### `minify`\n\nDefaults to `false`.\n\nMinify scripts with UglifyJS.\n\n```js\n\ngrunt.initConfig({\n  assets_inline: {\n    all: {\n      options: {\n        minify: true\n      },\n      files: {\n        'dest-index.html': 'source-index.html',\n      },\n    },\n  },\n});\n```\n\n#### Path config\n\nDefaults to `\"\"`.\n\nWhen you have absolute paths for your external assets, it helps to add the local address of your asset files; relative to uncompiled HTML file.\n\n```js\ngrunt.initConfig({\n  assets_inline: {\n    all: {\n      options: {\n        jsDir: \"../\",\n        cssDir: \"/project/styles/\",\n        assetsDir: \"/project/\"\n      },\n      files: {\n        'dest-index.html': 'source-index.html',\n      },\n    },\n  },\n});\n```\n\n**Example**\n\nIf the local cwd for your uncompiled file is `/project/html` then the above settings would resolve:\n\n`\u003cscript src=\"/assets/js/script.js\"\u003e` will use a local file at `/project/js/script.js`\n\n`\u003clink href=\"/assets/css/styles.css\"\u003e` will use a local file at `/project/styles/assets/css/styles.css`\n\n`\u003cimg src=\"/assets/svg/header.svg\"\u003e` will use a local file at `/project/assets/svg/header.svg`\n\n#### `inlineImg`\n\nDefaults to `false`.\n\nIf you want to smoosh `img` sources to Base64 in HTML, you can set `inlineImg` to true.\n\n```js\ngrunt.initConfig({\n  assets_inline: {\n    all: {\n      options: {\n        inlineImg: true\n      },\n      files: {\n        'dest-index.html': 'source-index.html',\n      },\n    },\n  },\n});\n```\n\n#### `inlineImgFileLimit`\n\nDefaults to `undefined`.\n\nIf you want to smoosh `img` only smaller than certain size, use `inlineImgFileLimit`.\n\n```js\ngrunt.initConfig({\n  assets_inline: {\n    all: {\n      options: {\n        inlineImg: true,\n        inlineImgFileLimit: 20 // 20 KB\n      },\n      files: {\n        'dest-index.html': 'source-index.html',\n      },\n    },\n  },\n});\n```\n\n#### `inlineSvg`\n\nDefaults to `true`.\n\nIf you want to smoosh SVGs in `img` tags in HTML, you can set `inlineSvg` to true.\n\n```js\ngrunt.initConfig({\n  assets_inline: {\n    all: {\n      options: {\n        inlineSvg: true\n      },\n      files: {\n        'dest-index.html': 'source-index.html',\n      },\n    },\n  },\n});\n```\n\n`\u003cimg src=\"src/to/header.svg\"\u003e` will turn into `\u003cimg src=\"data:image/svg+xml;utf8,\u003csvg xmlns='http://www.w3.org/2000/svg' width='2175...`.\n\n#### `inlineSvgFileLimit`\n\nDefaults to `undefined`.\n\nIf you want to smoosh `svg` only smaller than certain size, use `inlineSvgFileLimit`.\n\n```js\ngrunt.initConfig({\n  assets_inline: {\n    all: {\n      options: {\n        inlineSvg: true,\n        inlineSvgFileLimit: 40 // 40 KB\n      },\n      files: {\n        'dest-index.html': 'source-index.html',\n      },\n    },\n  },\n});\n```\n\n#### `inlineSvgBase64`\n\nInline SVGs with Base64. Defaults to `false`.\n\n```js\ngrunt.initConfig({\n  assets_inline: {\n    all: {\n      options: {\n        inlineSvg: true,\n        inlineSvgBase64: true\n      },\n      files: {\n        'dest-index.html': 'source-index.html',\n      },\n    },\n  },\n});\n```\n\nSVG images are inlined directly into HTML by default. To have more compatibility with older browsers, you can also Base64 SVGs:\n\n`\u003cimg src=\"src/to/header.svg\"\u003e` will turn into `\u003cimg src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0...`.\n\nPlease note that Base64 generated files are always slightly bigger than the original files.\n\n#### `inlineLinkTags`\n\nInline `link` Tags. Defaults to `false`.\n\nIf you want to smoosh images inside your `link` tags, for example favicons, you can set `inlineLinkTags` to true.\n\n```js\ngrunt.initConfig({\n  assets_inline: {\n    all: {\n      options: {\n        inlineLinkTags: true\n      },\n      files: {\n        'dest-index.html': 'source-index.html',\n      },\n    },\n  },\n});\n```\n\n#### `assetsUrlPrefix`\n\nAdditional Assets URL Prefix. If you have assets in CSS or JS (for example images, fonts, SVGs), smooshing CSS or JS into HTMLs may break relative URLs, so you may have to replace the original URLs to absolute URLs.\n\nThis option only searchs for URLs begin with `../`.\n\n```js\ngrunt.initConfig({\n  assets_inline: {\n    all: {\n      options: {\n        assetsUrlPrefix: '\u003c%= config.base %\u003e/assets/'\n      },\n      files: {\n        'dest-index.html': 'source-index.html',\n      },\n    },\n  },\n});\n```\n\n#### `includeTag`\n\nDefaults to `\"\"`.\n\n```js\ngrunt.initConfig({\n  assets_inline: {\n    all: {\n      options: {\n        includeTag: \"?assets-inline\"\n      },\n      files: {\n        'dest-index.html': 'source-index.html',\n      },\n    },\n  },\n});\n```\n\nBy default all CSS and JS files are smooshed in HTML, If you only need specific files to be smooshed, you should define `includeTag`.\n\nFor example the above configuration only smoosh filenames with `?assets-inline` queries:\n\n```html\n\u003clink href=\"/assets/css/styles.css?assets-inline\"\u003e\n```\n\n#### `cssTags`\n\nDefaults to\n\n```js\n{\n  start: \"\u003cstyle\u003e\",\n  end: \"\u003c/style\u003e\"\n}\n```\n\n#### `jsTags`\n\nDefaults to\n\n```js\n{\n  start: \"\u003cscript\u003e\",\n  end: \"\u003c/script\u003e\"\n}\n```\n\n#### `deleteOriginals`\n\nDefaults to\n\n```js\n{\n  deleteOriginals: false\n}\n```\n\nYou can delete smooshed files after the main task. Please note that once a file is smooshed into the HTML, it will marked as pending delete, no matter if it is included elsewhere without smooshing.\n\n#### `verbose`\n\nDefaults to\n\n```js\n{\n  verbose: false\n}\n```\n\nGet detailed output log.\n\n## Contributing\n\nIn lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using [Grunt](http://gruntjs.com/).\n\n## Release History\n\n- See `CHANGELOG.md` for further release history\n- 2015-08-12   v0.1.7   Add `assetsDir`, `inlineSvg`, and `inlineSvgBase64` support\n- 2015-07-31   v0.1.6   Fix test and new default for `assetsUrlPrefix`\n- 2015-07-31   v0.1.5   Add `assetsUrlPrefix` support for fixing relative assets URLs in smooshed CSS\n- 2015-07-28   v0.1.4   Add `ignoreImg` support\n- 2015-07-20   v0.1.3   Add `includeTag` support, only selected files will be smooshed if this option is defined\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsparanoid%2Fgrunt-assets-inline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsparanoid%2Fgrunt-assets-inline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsparanoid%2Fgrunt-assets-inline/lists"}