@@ -66,23 +66,23 @@ Somewhere in gulpfile.js:
6666// It is optional now, but you able to tune it as you wish.
6767// You can pass the settings by an object, or you can pass it using package.json
6868const jsonLoaderSettings = {
69- // Chose where the source files are located.
70- // Use sourcePath or the pare of pathHtml and pathData
69+ // Chose where the source files are located.
70+ // Use sourcePath or the pare of pathHtml and pathData
7171
72- // sourcePath: 'src',
73- pathHtml: ' src/html' ,
74- pathData: ' src/data' ,
72+ // sourcePath: 'src',
73+ pathHtml: ' src/html' ,
74+ pathData: ' src/data' ,
7575
76- // The namespace where the Data is located.
77- // To get some loaded data from the JSON in a PUG context use syntax:
78- // $.href or $.imports.menu
79- dataEntry: ' $' ,
76+ // The namespace where the Data is located.
77+ // To get some loaded data from the JSON in a PUG context use syntax:
78+ // $.href or $.imports.menu
79+ dataEntry: ' $' ,
8080
81- // It needs for the Date object to show a local date
82- locales: ' en-GB' ,
81+ // It needs for the Date object to show a local date
82+ locales: ' en-GB' ,
8383
84- // Will report about the loaded JSON files
85- report: true ,
84+ // Will report about the loaded JSON files
85+ report: true ,
8686};
8787
8888const gulp = require (' gulp' );
@@ -91,46 +91,45 @@ const jsonLoaderFactory = require('./lib/gulp-json-loader');
9191const jsonLoader = jsonLoaderFactory (jsonLoaderSettings);
9292
9393function html () {
94- return gulp .src (' src/html/**/*.pug' )
95- .pipe (plugins .data (jsonLoader))
96- .pipe (plugins .pug ({
97- pretty: true
98- }))
99- .pipe (gulp .dest (' dest' ))
100- ;
94+ return gulp .src (' src/html/**/*.pug' )
95+ .pipe (plugins .data (jsonLoader))
96+ .pipe (plugins .pug ({
97+ pretty: true
98+ }))
99+ .pipe (gulp .dest (' dest' ));
101100}
102101```
103102
104103Somewhere in json file:
105104``` javascript
106105{
107- " data" : { // Here, in the data node, you can add any data
108- " name" : " Catalog" , // that belongs to your page
109- " href" : " #catalog" ,
110- " visible" : true
111- },
112- " imports" : [ // Sometimes you need to include other parts of the data.
113- " partials/catalog_1" , // To avoid the duplicate data you can split the files
114- " partials/catalog_2" , // and include them partially
115- " partials/genres"
116- ]
106+ " data" : { // Here, in the data node, you can add any data
107+ " name" : " Catalog" , // that belongs to your page
108+ " href" : " #catalog" ,
109+ " visible" : true
110+ },
111+ " imports" : [ // Sometimes you need to include other parts of the data.
112+ " partials/catalog_1" , // To avoid the duplicate data you can split the files
113+ " partials/catalog_2" , // and include them partially
114+ " partials/genres"
115+ ]
117116}
118117```
119118
120119Somewhere in pug file:
121120``` pug
122121block content
123- // As a result, you will be able to access the <data> variable.
124- // All imported data will be available in the data .imports namespace
125- //- - console.log(data )
122+ // As a result, you will be able to access the "$" variable.
123+ // All imported data will be available in the $ .imports namespace
124+ //- - console.log($ )
126125
127- div= filename
128- div: a(href = $.href)= $.name
126+ div= filename
127+ div: a(href = $.href)= $.name
129128
130- ul.genres
131- each $GenreItem in $.imports.genres
132- li
133- a(href = $GenreItem.href)= $GenreItem.name
129+ ul.genres
130+ each $GenreItem in $.imports.genres
131+ li
132+ a(href = $GenreItem.href)= $GenreItem.name
134133```
135134
136135Run command to build html page with data
0 commit comments