\n$ git clone git://github.com/aaaristo/html-builder-sample.git\n\n\nThis will bring you a preconfigured project with most common options,\nthat contains 4 files:\n
\n$ find ./ -type f\n./Gruntfile.js\n./package.json\n./README.md\n./src/js/page/home.js\n\n\nLet's skip the *Gruntfile.js* for the moment. (as usal it contains various grunt tasks configurations) \n\nLooking at the package.json you can see which dependencies will be installed \nto make the thing work:\n```javascript\n{\n ...\n\n \"devDependencies\": {\n \"grunt\": \"~0.4.0\",\n \"grunt-contrib-watch\": \"~0.3.1\",\n \"grunt-contrib-clean\": \"~0.4.0\",\n \"grunt-contrib-connect\": \"~0.2.0\",\n \"grunt-html-builder\": \"~0.4.20\",\n \"grunt-contrib-copy\": \"~0.4.0\",\n \"grunt-s3\": \"~0.2.0-alpha.1\",\n \"grunt-cloudfront-clear\": \"0.0.1\",\n \"grunt-contrib-compass\": \"~0.2.0\"\n },\n\n ...\n}\n```\n\nNow you have to run *npm install* from the project directory to install those dependencies.\n\nOnce you get the dependencies installed you can finally run *grunt*\nand you should see somenthing like:\n\n
\nRunning \"html-builder-json\" task\n\nRunning \"html-builder\" task\n>> Evaluating home.js...\n>> Launching builders...\n>> builder[0]: inited\n>> builder[0]: Generated page dist/index.html\n\nRunning \"copy:client\" (copy) task\n\n\nDone, without errors.\n\n\nNice, what happened is that html-builder found a file *home.js*\nunder the directory *src/js/page*, containing only this line of javascript:\n\n```javascript\npage({ path: 'index' });\n```\nThe *page* function tells the builder to produce a page that is described \nby the object passed as parameter, actually we are telling the builder \nwe want a page called index.html, and the page is created under the *dist*\ndirectory inside of your project. So now you should have a *dist/index.html*\nthat look like this:\n\n```html\n\n\n \n
Hello world! This is HTML5 Boilerplate.
\n\n \n \n \n \n\n \n \n \n\n```\nRerun *grunt* and try the site with *grunt listen* (grunt-contrib-connect + grunt-contrib-watch). \nOk now we have nice html but we miss some resources, right?\nSo create the *src/client/* directory so that you have a root\nfor files that have to be accessed by the browser and place H5BP\nresources in there like this:\n\n\nsrc/client\nsrc/client/css\nsrc/client/css/main.css\nsrc/client/css/normalize.css\nsrc/client/img\nsrc/client/img/.gitignore\nsrc/client/js\nsrc/client/js/main.js\nsrc/client/js/plugins.js\nsrc/client/js/vendor\nsrc/client/js/vendor/jquery-1.9.1.min.js\nsrc/client/js/vendor/modernizr-2.6.2.min.js\n\n\nand if you don't have the *grunt listen* running give it a *grunt client*\nto make grunt copy the files and directories under *src/client* to the\n*dist* directory. Now once you have the *grunt listen* active the are kept\nin sync by grunt (grunt-contrib-watch + grunt-contrib-copy). The same\nis true for page generation... Try to edit the html.html file and see the results\non your browser by refreshing the page.\n\nOk, probably you have a more complex site to build than this, so lets take\na look at how the builder builds your pages:\n\n* as seen it uses the *src/html/html.html* to start (or a default html if it is not provided)\n* it goes throught all the files in *src/js/page* to understand which pages to build\n* your files tell him how many pages to build by simply calling the *page* function many times,\n to experiment try to change the *home.js* file to read:\n \n ```javascript\n _(100).times(function (i)\n {\n page({ path: 'index'+i });\n });\n ```\n \n yes... it dumbly creates 100 pages. But you now know you can use underscore.js in those files\n by default, and that the path attribute tells the builder which html files to create. There is\n another thing to note: all those pages from now on are of the same type for the builder, the type\n is a machine name given by the name of the js file that asks the creation of a page, in this case\n *home* type. So yes probably the home.js in almost any site will call the page function 1 time (so \n revert this dumb thing).\n\n* Now lets suppose you want to create a page for every people in your company, create a \n *src/js/page/person.js* like this:\n\n```javascript\n['John','Jane','Dave','Mike']\n.forEach(function (person)\n{\n page({ path: 'person/'+person.toLowerCase(), title: person });\n});\n```\n so ok you got it... Open html.html and replace the content of the title tag to read: \n\n```html\n
\n blocks: { region: 'block' }\n\n\n or of course (to place multiple blocks in order)\n\n\n blocks: { region1: ['block1','block2',...], region2: ... }\n\n\n * so blocks are almost always static pieces of html that you want to reuse in various pages,\n while templates are somenthing you use to render data, lets add template rendered after the peoples\n block, create *src/html/template/person-menu.html*:\n\n```html\n\n \nindex.html\nit/index.html\nes/index.html\nfr/index.html\n\n\nAs you can see the default language has no prefix whether all other languages are prefixed with the prefix you specified in the *languages* array. We encourage you to use [standards](http://en.wikipedia.org/wiki/List_of_ISO_639-1_codes).\nHo you switch between languages is up to your implementation: you just need to link the current path with the right prefix.\n\nOnce you configured the *languages* array, you can use the *t* converter in your templates, to translate data or strings:\n```html\n\n
This is a translated string: {{t:'Hello world'}}
\n\nThis is a translated object property: {{t:role}}
\n \n```\n\nIn order to get your data translated you should define special object properties keyed by language like this:\n```javascript\n\n[{\n name: 'John Doe',\n role: {\n en: 'Sales',\n it: 'Vendite',\n es: 'Venta',\n fr: 'Ventes'\n }\n}]\n\n```\n\nwhile to get strings translated you should define a special collection *src/json/i18n.json*, like this:\n```javascript\n\n{\n \"Hello world\": {\n it: 'Ciao mondo',\n es: 'Hola mundo',\n fr: 'Bonjour tout le monde'\n }\n}\n\n```\n\nThat is actually JSON object where the default language string is the key, and the value is an object keyed by\nalternative languages.\n\n\nYou can specify different url aliases for different languages in your page.js just configure your href function properly\n```javascript\n\n href= function (entity)\n {\n return {\n it: entity.alias.it,\n en: entity.alias.en\n }\n };\n\n path:\n {\n it: href(entity).it,\n en: href(entity).en\n },\n\n```\n\n\n** ... doc in progress ...**\n\nThings to document:\n* html html\n* html layouts / regions\n* html blocks\n* html templates (jsrender)\n* client files (images,css,js...)\n* filtering pages\n* s3 / cloudfront deploy\n* RDF / jsonld support\n\n## Release History\n* 2013-05-15 v0.4.20 First documented BETA release\n\n## License\nCopyright (c) 2013 Andrea Amerigo Aristodemo Gariboldi \nLicensed under the Apache2 license.\n\n\n[](https://bitdeli.com/free \"Bitdeli Badge\")\n\n","maintainers":[{"name":"aaaristo","email":"andrea.gariboldi@gmail.com"},{"name":"signalkuppe","email":"leoni.matteo@gmail.com"}],"time":{"modified":"2022-06-18T15:09:44.676Z","created":"2013-03-08T18:38:29.509Z","0.4.0":"2013-03-08T18:38:32.746Z","0.4.1":"2013-03-08T20:03:43.456Z","0.4.2":"2013-03-08T20:42:07.861Z","0.4.3":"2013-03-08T21:49:46.621Z","0.4.4":"2013-03-15T18:12:08.682Z","0.4.5":"2013-03-18T14:54:56.015Z","0.4.6":"2013-04-06T00:08:09.654Z","0.4.7":"2013-04-06T00:12:07.777Z","0.4.9":"2013-04-17T19:43:16.549Z","0.4.10":"2013-04-17T19:47:02.845Z","0.4.11":"2013-04-18T16:55:46.692Z","0.4.12":"2013-05-03T15:29:07.649Z","0.4.13":"2013-05-05T16:31:16.657Z","0.4.14":"2013-05-05T16:46:00.749Z","0.4.15":"2013-05-05T17:04:13.978Z","0.4.16":"2013-05-06T12:48:10.638Z","0.4.17":"2013-05-14T16:54:59.826Z","0.4.18":"2013-05-15T08:17:49.216Z","0.4.19":"2013-05-15T16:23:25.879Z","0.4.20":"2013-05-15T18:27:50.554Z","0.4.21":"2013-05-17T11:06:48.857Z","0.4.22":"2013-05-21T13:04:53.123Z","0.4.23":"2013-06-04T16:29:29.143Z","0.4.24":"2013-06-12T16:27:58.481Z","0.4.25":"2013-06-12T16:50:58.909Z","0.4.26":"2013-12-19T23:48:53.428Z","0.5.0":"2014-03-01T16:32:20.716Z","0.5.1":"2014-03-01T18:48:56.717Z","0.5.2":"2014-03-01T19:02:48.732Z","0.5.3":"2014-03-01T20:01:54.175Z","0.5.4":"2014-03-01T20:32:32.847Z","0.5.5":"2014-03-01T20:56:48.325Z","0.5.6":"2014-03-08T20:06:32.715Z","0.5.7":"2014-03-17T10:58:26.914Z","0.5.8":"2014-04-29T10:54:35.067Z","0.5.9":"2015-05-22T13:38:49.673Z","0.6.0":"2015-11-24T14:37:42.553Z","0.6.1":"2015-11-24T14:44:14.577Z","0.6.2":"2018-06-22T14:51:15.693Z","0.6.3":"2018-06-22T15:34:05.177Z","0.6.4":"2018-06-26T12:32:53.747Z","0.6.5":"2018-06-27T08:25:22.816Z","0.6.6":"2018-08-10T13:05:35.556Z","0.6.7":"2018-08-31T08:00:15.087Z"},"author":{"name":"Andrea Amerigo Aristodemo Gariboldi","url":"https://github.com/aaaristo"},"repository":{"type":"git","url":"git://github.com/aaaristo/grunt-html-builder.git"},"homepage":"https://github.com/aaaristo/grunt-html-builder","keywords":["gruntplugin"],"bugs":{"url":"https://github.com/aaaristo/grunt-html-builder/issues"},"readmeFilename":"README.md"}