{"id":48774526,"url":"https://github.com/yukal/gulp-json-loader","last_synced_at":"2026-04-13T12:03:57.846Z","repository":{"id":40565193,"uuid":"282510101","full_name":"yukal/gulp-json-loader","owner":"yukal","description":"A little tool for the gulp-data plugin. It useful for automatic data loading in the development using the PUG layouts","archived":false,"fork":false,"pushed_at":"2024-06-26T02:35:11.000Z","size":343,"stargazers_count":4,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-06-26T04:47:06.428Z","etag":null,"topics":["chai","gulp","gulp-data","javascript","mocha","nodejs","pug"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/yukal.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":"2020-07-25T19:19:31.000Z","updated_at":"2024-06-26T02:31:50.000Z","dependencies_parsed_at":"2023-02-08T07:45:57.495Z","dependency_job_id":"bdb8141d-010b-47ed-9bc7-2763f526e90d","html_url":"https://github.com/yukal/gulp-json-loader","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/yukal/gulp-json-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yukal%2Fgulp-json-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yukal%2Fgulp-json-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yukal%2Fgulp-json-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yukal%2Fgulp-json-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yukal","download_url":"https://codeload.github.com/yukal/gulp-json-loader/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yukal%2Fgulp-json-loader/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31751708,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T09:16:15.125Z","status":"ssl_error","status_checked_at":"2026-04-13T09:16:05.023Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["chai","gulp","gulp-data","javascript","mocha","nodejs","pug"],"created_at":"2026-04-13T12:03:57.703Z","updated_at":"2026-04-13T12:03:57.831Z","avatar_url":"https://github.com/yukal.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gulp-json-loader\nA little tool for the [gulp-data](https://www.npmjs.com/package/gulp-data) plugin. It useful for automatically data loading in the development including the PUG files.\n\n### What for\nI've tried to find a simple solution for assigning my variables into PUG files in a building process. Some of them have similar examples between the 2014th and 2019th years and don't satisfy my technical needs. The most popular solution I have found looks like this:\n\n```javascript\n// Somewhere in gulp task\n.pipe(data(() =\u003e JSON.parse(fs.readFileSync('data.json')) ))\n\n// Sometimes it can looks like this one\n.pipe(data(() =\u003e require('data.json') ))\n```\n\nWhat's wrong with these examples?\nFirst of all, each time when the queue reaches the HTML part, it starts the merging process of all the JSON files. It means that sometimes the process is performing unnecessary actions. What if we don't need to include the data for some of the HTML files? Well, it still runs enforced actions at any time. We can solve it by once running merge and then always including it as a combined object from the JSON file. But it is still not a good idea to include the JSON file there where we shouldn't.\n\n### How does it work\nWhen the build process queue reaches HTML, it automatically searches the JSON file with the same name as in the directory with kinds of PUG files (it depends on how you set up your project).\n\n### Structure\nTo assign some data inside your pages, you have to follow canonical paths. The directory structure with JSON files must contain two necessary folders inside pages and imports. The \"pages\" directory structure must have the same structure as the directory with the pug files. In the example below, pug files are placed inside the \"html\" directory. The \"imports\" directory is provided for the JSON files, which you can include as partial data. If you've missed any JSON file inside the data/pages directory, the loading of the JSON files will not happen, and the error will not rise except, It will not rise if you do not try to get the data variable from the current context while the building process is running.\n\n```bash\nsrc                 src\n├─ ...              ├─ ...\n└─ html             └─ data\n   │                   ├─ imports\n   │                   │  └─ ...\n   │                   └─ pages\n   ├─ about.pug           ├─ about.json\n   ├─ menu.pug            ├─ menu.json\n   ├─ without_data.pug    ├─ [ empty ]   // no data provided\n   └─ subdir              └─ subdir\n      └─ ...                 └─ ...\n```\n\n### Usage\n\nSomewhere in gulpfile.js:\n```javascript\n// It is optional now, but you able to tune it as you wish.\n// You can pass the settings by an object, or you can pass it using package.json\nconst jsonLoaderSettings = {\n  // Chose where the source files are located.\n  // Use sourcePath or the pare of pathHtml and pathData\n\n  // sourcePath: 'src',\n  pathHtml: 'src/html',\n  pathData: 'src/data',\n\n  // The namespace where the Data is located.\n  // To get some loaded data from the JSON in a PUG context use syntax:\n  // $.href or $.imports.menu\n  dataEntry: '$',\n\n  // It needs for the Date object to show a local date\n  locales: 'en-GB',\n\n  // Will report about the loaded JSON files\n  report: true,\n};\n\nconst gulp = require('gulp');\nconst plugins = require('gulp-load-plugins')();\nconst jsonLoaderFactory = require('./lib/gulp-json-loader');\nconst jsonLoader = jsonLoaderFactory(jsonLoaderSettings);\n\nfunction html() {\n  return gulp.src('src/html/**/*.pug')\n    .pipe(plugins.data(jsonLoader))\n    .pipe(plugins.pug({\n      pretty: true\n    }))\n    .pipe(gulp.dest('dest'));\n}\n```\n\nSomewhere in json file:\n```javascript\n{\n  \"data\": {                       // Here, in the data node, you can add any data\n    \"name\": \"Catalog\",            // that belongs to your page\n    \"href\": \"#catalog\",\n    \"visible\": true\n  },\n  \"imports\": [                    // Sometimes you need to include other parts of the data.\n    \"partials/catalog_1\",         // To avoid the duplicate data you can split the files\n    \"partials/catalog_2\",         // and include them partially\n    \"partials/genres\"\n  ]\n}\n```\n\nSomewhere in pug file:\n```pug\nblock content\n  // As a result, you will be able to access the \"$\" variable.\n  // All imported data will be available in the $.imports namespace\n  //- - console.log($)\n\n  div= filename\n  div: a(href = $.href)= $.name\n\n  ul.genres\n    each $GenreItem in $.imports.genres\n      li\n        a(href = $GenreItem.href)= $GenreItem.name\n```\n\nRun command to build html page with data\n```bash\n$ gulp html\n\n# Or\n$ npx gulp html\n```\n\n## Libraries Using `gulp-json-loader`\n\n- [gulp-data](https://www.npmjs.com/package/gulp-data)\n\n## License\n\n[MIT License](http://en.wikipedia.org/wiki/MIT_License)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyukal%2Fgulp-json-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyukal%2Fgulp-json-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyukal%2Fgulp-json-loader/lists"}