Convert a buffer of files into a JSON representation of the directory structure using gulp
First, install gulp-directory-map
as a development dependency:
npm install --save-dev gulp-directory-map
Then, add it to your gulpfile.js
:
var directoryMap = require("gulp-directory-map");
gulp.src('app/**/*.html')
.pipe(directoryMap({
filename: 'urls.json'
}))
.pipe(gulp.dest('dist'));
Given this directory structure...
app
|_nested-folder-1
|_nested-folder-1-1
|_index.html
|_faq.html
|_index.html
|_nested-folder-2
|_nested-folder-2-1
|_index.txt
|_index.html
|_index.html
|_index.txt
... this JSON object would be written to dist/urls.json
:
{
"index.html": "index.html",
"nested-folder-1": {
"faq.html": "nested-folder-1/faq.html",
"index.html": "nested-folder-1/index.html",
"nested-folder-1-1": {
"index.html": "nested-folder-1/nested-folder-1-1/index.html"
}
},
"nested-folder-2": {
"index.html": "nested-folder-2/index.html"
}
}
This is useful for mapping out a directory structure after passing files through a pre-processor, generating data to create navigation during build, and more. Have fun!
Type: String
Default: urls.json
The path to write the directory structure JSON file to.
Type: String
Default: none
The a string to prepend to every url.
Given the directory structure above, specifiying prefix: 'prefixed-folder'
would generate this JSON:
{
"prefixed-folder": {
"index.html": "prefixed-folder/index.html",
"nested-folder-1": {
"faq.html": "prefixed-folder/nested-folder-1/faq.html",
"index.html": "prefixed-folder/nested-folder-1/index.html",
"nested-folder-1-1": {
"index.html": "prefixed-folder/nested-folder-1/nested-folder-1-1/index.html"
}
},
"nested-folder-2": {
"index.html": "prefixed-folder/nested-folder-2/index.html"
}
}
}
Thanks to @hparra for creating the generator-gulp-plugin. It has lots of great examples and boilerplate setup, and was used to get this plugin bootstrapped.