gulp-embed-json
v1.5.11
Published
Gulp plugin to inline/embed JSON data into HTML files.
Downloads
29
Maintainers
haenslReadme
gulp-embed-json
Gulp plugin to inline/embed JSON data into HTML files.
Installation
npm i --save-dev gulp-embed-jsonQuick 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
mimeTypes string | Array<string>
Provide custom mime types to specify which <script> tags should be embedded.
default: application/json, application/ld+json
Example: Embed only tags with type="application/ld+json"
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>root string
Provide the directory root where JSON files are located.
default: __dirname
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.jsonGulp task
const embedJSON = requrie('gulp-embed-json');
// ...
gulp.task('embedJSON', () =>
gulp.src('*.html')
.pipe(embedJSON({
root: './assets/json'
}))
.pipe(gulp.dest('dist/')));minify boolean
Indicate whether or not to minify JSON data.
default: true
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>encoding string
Provide the encoding of your JSON files.