gulp-embed-json
Gulp plugin to inline/embed JSON data into HTML files.
Installation
npm i --save-dev gulp-embed-json
Quick Start
const embedJSON = require('gulp-embed-json');
gulp.task('embedJSON', () =>
gulp.src('*.html')
.pipe(embedJSON())
.pipe(gulp.dest('dist/')));
This gulp task will inline/embed any scripts with JSON source attribute and respective mime type.
Options
string | Array<string>
mimeTypes Provide custom mime types to specify which <script>
tags should be embedded.
application/json, application/ld+json
default: type="application/ld+json"
Example: Embed only tags with HTML layout
<html>
<head><!-- ... --></head>
<body>
<!-- ... -->
<script type="application/json" src="data.json"></script>
<script type="application/ld+json" src="structured-data.json"></script>
<!-- ... -->
</body>
</html>
structured-data.json
{
"@context": "http://schema.org",
"@type": "SoftwareApplication",
"name": "gulp-embed-json"
}
Gulp task
const embedJSON = requrie('gulp-embed-json');
// ...
gulp.task('embedJSON', () =>
gulp.src('*.html')
.pipe(embedJSON({
mimeTypes: 'application/ld+json'
}))
.pipe(gulp.dest('dist/')));
Output
<html>
<head><!-- ... --></head>
<body>
<!-- ... -->
<script type="application/json" src="data.json"></script>
<script type="application/ld+json">{"@context":"http://schema.org","@type":"SoftwareApplication","name":"gulp-embed-json"}</script>
<!-- ... -->
</body>
</html>
string
root Provide the directory root where JSON files are located.
__dirname
default: The folder in which the module is executed.
Example: Alternative JSON file root
HTML layout
<html>
<head><!-- ... --></head>
<body>
<!-- ... -->
<script type="application/json" src="data.json"></script>
<!-- ... -->
</body>
</html>
Folder structure
/src
index.html
gulpfile.js
/assets
/json
data.json
Gulp task
const embedJSON = requrie('gulp-embed-json');
// ...
gulp.task('embedJSON', () =>
gulp.src('*.html')
.pipe(embedJSON({
root: './assets/json'
}))
.pipe(gulp.dest('dist/')));
boolean
minify Indicate whether or not to minify JSON data.
true
default: Example: Minify
HTML layout
<html>
<head><!-- ... --></head>
<body>
<!-- ... -->
<script type="application/json" src="data.json"></script>
<!-- ... -->
</body>
</html>
data.json
{
"foo": "bar"
}
Gulp task
const embedJSON = requrie('gulp-embed-json');
// ...
gulp.task('embedJSON', () =>
gulp.src('*.html')
.pipe(embedJSON({
minify: true // default
}))
.pipe(gulp.dest('dist/')));
Output
<html>
<head><!-- ... --></head>
<body>
<!-- ... -->
<script type="application/json">{"foo":"bar"}</script>
<!-- ... -->
</body>
</html>
Example: Do not Minify
HTML layout
<html>
<head><!-- ... --></head>
<body>
<!-- ... -->
<script type="application/json" src="data.json"></script>
<!-- ... -->
</body>
</html>
data.json
{
"foo": "bar"
}
Gulp task
const embedJSON = requrie('gulp-embed-json');
// ...
gulp.task('embedJSON', () =>
gulp.src('*.html')
.pipe(embedJSON({
minify: false
}))
.pipe(gulp.dest('dist/')));
Output
<html>
<head><!-- ... --></head>
<body>
<!-- ... -->
<script type="application/json">{
"foo": "bar"
}</script>
<!-- ... -->
</body>
</html>
string
encoding Provide the encoding of your JSON files.