[+] include/includeBuilder sample

[+] include/includeBuilder sample

layout:view master='view' {

	title {
		a.github-ribbon href='https://github.com/tenbits/IncludeJS';
	}

	tabs {
		radioButtons{
			button.active name='info' > 'Info'
			button name='commands' > 'Commands'
			button name='resources' > 'Resources'
			button name='sample' > 'Sample'
		}
	}

	content {
		p.container.tabPanel {
			div.info.active {
				div {
				    prism > ' > npm install -g includejs'
					ul {
						li {
							'Builder - Combine Resources included with IncludeJS'
							div.hint > 'Javascript, Style, HTML, Image'
							div.hint > 'Images that are in styles, that are not in working directory (are referenced), will be copied into working directory'
							div > ul {
								li > 'include.js'
								li > 'include.css'
								li > 'include.load'
								li > 'include.lazy'
							}
						}
						li { 'Minify'
							div.hint {
							  a href='https://npmjs.org/package/uglify-js' target='_blank' > 'UglifyJS'
							  ' and '
							  a href='https://npmjs.org/package/clean-css' target='_blank' > 'clean-css'
							  ' are used'
							}
							div.hint > 'For UglifyJS you can specify compressor settings (So you can set defines to cut off DEBUG/TEST code from Release)
								See UglifyJS documentation.'
						}
						li { 'JSHINT' div.hint { 'See ' a href='http://jshint.com/docs/' target='_blank' > 'JSHINT'} }
						li {
							'Integrated Web Server'

							div.hint > b > 'with auto-refresh feature'
							div.hint > 'HOT Reload of *.css, *.js and *.mask files, for other stuff page reload triggers'
						}
						li {
							'Shell Commands'
							div.hint > 'As Builder is action-based, shell commands could be used as pre-build or post-build.'
						}

						li {
							'Custom Scripts as Actions'
							div.hint {
								prism > 'include.exports = { process: function(config, idfr) { /* ... */ idfr.resolve(); } }'
							}
							div.hint > 'Could be used as shell scripts. Note that you can use includejs api classes'
						}

						li {
							'CoffeeScript and Less support'
							div.hint > '*.less will be compiled and joined with regular css files, as also CoffeeScript will be joined into one main js file'
						}

						li {
							'Handle Resource Referencing and Importing'
						}
					}
				}
			}

			div.commands {
				ul {
					li {
						code > ' > includejs [action] [arg] [...] -KEY VALUE [...]'
						div {
							div > 'All this arguments will be parsed to a config object'
							div.hint > '@see supported actions'
						}
					}
					li {
						code > ' > includejs [*.html] -minify -KEY VALUE'

						div > '
						If first argument is html file, then this path will be set in config for "file" property, and "build" for action.
						 You can also sepcify some additional config values for this build - @see "build" action.
						'
					}
					li {
						code > ' > includejs [*.config | *.js]'
						p {
							'Load config and process'
							div > '*.config — JSON'
							div {
							 	'*.js — This javascript must set "config" to globals: ' tt > 'global.config = {OBJECT}'
							}
						}
					}
				}
				h3 > 'Config'
				div.hint {
					'Config contains one or more actions. (One action is an Object, more actions is Array of Objects) '
				}
				div {
					'Available actions and their settings:'
				}
				ul{

					li {
						ul {
							li > '{'
							li { '"action": "' b > 'build' '"' }
							li > '"file" — {String} - HTML input file'
							li > '"vars" — {Object} — Variables used when parsing includes'

							li > '"minify" — {Boolean} — run MinifyJS and clean-css'
							li > '"uglify" - {Object:optional} - UglifyJS compressor settings. @default {global_defs: {DEBUG: false}}'
							li  {
								'"jshint" : {'
								ul {
									li > '"options" - {Object} - JSHINT options'
									li > '"globals" - {Object} - global variables. @default {"window": false, "document": false}'
									li > '"ignore" - {Object} - file names to ignore'
									li > '}'
								}
							}
							li > '"outputMain" — output name of a built html — @default "{name}.build.html"'
							li > '"outputSources" — directory of combined/copied resources — @default "{name}.build/"'
							li > '}'
						}

						p {
							'Build includejs project.'
							div.hint > 'It will parse specified file and its resources, and will recursive collect all includes'
						}
					}
					li {
						ul{
							li > '{'
							li { '"action": "' b > 'project-import' '"' }
							li > '}'
						}
						p {
						  'Copy resources, that are used by current project, from referenced directories in '
							tt > '.reference/*' ' to ' tt >'.import' ' directory'
						}
					}
					li {
						ul{
							li > '{'
							li { '"action": "' b > 'project-reference' '"' }
							li > '}'
						}
						p {
						  'Create outer referencing in ' tt > '.reference/*' 'acording to routing defined in '
						  tt > '%npm-global-directory%/includejs/globals.txt'
						}
					}
					li {
						ul{
							li > '{'
							li { '"action": "' b > 'shell' '"' }
							li > '"command": /** Array or String :: string commands*/ ['
							li > '"cmd /C copy /B index.html c:/app",'
							li > '"cmd /C copy /B index.build/ c:/app/index.build" ]'
							li > '}'
						}
						p > 'Execuate shell commands'
					}
					li {
						ul {
							li > '{'
							li { '"action": "' b > 'custom' '"' }
							li > '"script": "scriptPath.js"'
							li > '}'
						}
						p > 'Execuate custom scripts'
						div.hint {
							div > 'Script shoud export object with .process(config, idfr) function.'
							div > 'After script is ready call idfr.resolve() for processing next actions'
						}
						div.hint {
							'If you want to call just that action only, you can do it from command line:'
							div > code > ' > includejs custom scriptPath.js'
						}
					}

					li {
						ul{
							li > '{'
							li { '"action": "' b > 'server' '"' }
							li > '"port": NUMBER /* optional @default  5777 */'
							li > '"open": Filename to open in browser /* optional */'
							li > '}'
						}
						p { 'Create server in ' tt > '%current-directory%' }
						div.hint {
							'To not create config file only for this action, you can use raw cli command with action argument:'
							div > code > ' > includejs server'
							'To open browser and additionally to define port:'
							div > code > ' >  includejs server index.dev.html -port 7777'
						}
					}
					li {
						ul{
							li > '{'
							li { '"action": "' b > 'reference' '"' }
							li > '"path": directory path || name of a project from globals.txt'
							li > '"name": reference name /* optional @default directory name*/'
							li > '}'
						}
						p > 'Creates symbolic link to specified path in %current_directory%/.reference/%name%'
						div.hint {
							div > 'Command Line calls: '
							div > code > ' > includejs reference c:/development/mylib'
							div > 'You can add this path to globals.txt, so afterwards you can call this as such:'
							div > code > ' > includejs reference mylib'
						}
					}
					li {
						ul{
							li > '{'
							li { '"action": "' b > 'template' '"' }
							li > '"name": name'
							li > '}'
						}

						p > 'Create Template Project in %current_dir%'
						p > 'Available: "starter" , "todomvc" (@sample application to fiddle around with maskjs,includejs etc.)'
						div.hint {
							'You can create any other templates with just coping needed files to '
							tt > '%npm-global-directory%/node_modules/includejs/template/%YourTemplateName%'
						}
						div.hint {
							'Raw cli command:'
							div > code > ' > includejs template starter'
						}
					}
					li {
						ul{
							li > '{'
							li { '"action": "' b > 'git-clone' '"' }
							li > '}'
						}
						p > 'Clones LibJS Libraries into current directory'
						div {
							'It will also save this path intern, for future routing - so calling this action,
								includejs should have
								write permissions to ' tt > '%npm-global-directory%/includejs' ' directory'
						}
						div.hint {
							'Command Line: '
							code > ' > includejs git-clone'
						}
					}
					li {
						ul{
							li > '{'
							li { '"action": "' b > 'globals' '"' }
							li > '}'
						}
						code > ' > includejs globals'

						p > 'Open globals.txt of includejs for editing of your routes, etc. Example of globals.txt:'

						prism src='/api.help/globals.js';

					}
				}
			}
			div.resources {
				h6 > 'Small note about external resources'
				p > 'Every application has some outer dependencies. Lets say you created empty project and want to use some classes, styles and images
				from you own library "MyCoolStuff". There are several ways you can do it.'
				ul {
					li {
						i > 'Bad — ''Copy them into working project. '
						div;
						u > 'Contra'' — '
						ul {
							li > 'you dont know always from start on what classes or styles you need'
							li > 'you have to work a lot with copy/paste - and this was always a mess.'
							li > 'they become part of the project. This is good for Release, but not for Development'
							li > 'harms code organization energy'
						}
					}

					li {
						i > 'Best — ''Use symbolic links'
						div > 'Example:'
						ul {
							li {
								'Install IncludeJS.Builder and LibJS libraries: ' a href='#/about/install' > '@how-to'
							}
							li {
								'Create template project'
								div > code > '> mkdir testProject && cd testProject && includejs template starter'
								div {
									'And now, under "testProject/.reference/libjs" you find a symbolic link to libjs project
									and all requests to libjs libraries, such as '
									tt > 'include.js({ lib: "mask" })' 'will path through that symbolic link'
								}
							}
						}

						p {
							'After your application is ready for release, you can build it - all resources will be combined, and no more referencing will occure'

							div.hint {
							  'Any time you can import all referenced resources to projects directory. '
							  i > 'You may need this, for example, for sending your dev-project to smbd. else.'

							  p > code > ' > includejs project-import'
							}

							p.hint > 'This will import only resources you use in your project (scripts, images, views, etc.), and not the whole directories.'
						}
					}
				}

			}

			div.sample {
				h4 > 'To try includejs/includejsBuilder'
				div > code > 'npm install -g includejs'
				div > code > 'cd some/folder/'
				div > code > 'includejs template sample'
				div > code > 'includejs server index.dev.html'

				p > 'It will run browser and loads index.dev.html'
			}
		}
	}

}

layout:view master='view' {

	title {
		a.github-ribbon href='https://github.com/tenbits/IncludeJS';
	}

	tabs {
		radioButtons{
			button.active name='info' > 'Info'
			button name='commands' > 'Commands'
			button name='resources' > 'Resources'
		}
	}

	content {
		p.container.tabPanel {
			div.info.active {
				div {
				    prism > ' > npm install -g includejs'
					ul {
						li {
							'Builder - Combine Resources included with IncludeJS'
							div.hint > 'Javascript, Style, HTML, Image'
							div.hint > 'Images that are in styles, that are not in working directory (are referenced), will be copied into working directory'
							div > ul {
								li > 'include.js'
								li > 'include.css'
								li > 'include.load'
								li > 'include.lazy'
							}
						}
						li { 'Minify'
							div.hint {
							  a href='https://npmjs.org/package/uglify-js' target='_blank' > 'UglifyJS'
							  ' and '
							  a href='https://npmjs.org/package/clean-css' target='_blank' > 'clean-css'
							  ' are used'
							}
							div.hint > 'For UglifyJS you can specify compressor settings (So you can set defines to cut off DEBUG/TEST code from Release)
								See UglifyJS documentation.'
						}
						li { 'JSHINT' div.hint { 'See ' a href='http://jshint.com/docs/' target='_blank' > 'JSHINT'} }
						li {
							'Integrated Web Server'

							div.hint > b > 'with auto-refresh feature'
							div.hint > 'HOT Reload of *.css, *.js and *.mask files, for other stuff page reload triggers'
						}
						li {
							'Shell Commands'
							div.hint > 'As Builder is action-based, shell commands could be used as pre-build or post-build.'
						}

						li {
							'Custom Scripts as Actions'
							div.hint {
								prism > 'include.exports = { process: function(config, idfr) { /* ... */ idfr.resolve(); } }'
							}
							div.hint > 'Could be used as shell scripts. Note that you can use includejs api classes'
						}

						li {
							'CoffeeScript and Less support'
							div.hint > '*.less will be compiled and joined with regular css files, as also CoffeeScript will be joined into one main js file'
						}

						li {
							'Handle Resource Referencing and Importing'
						}
					}
				}
			}

			div.commands {
				ul {
					li {
						code > ' > includejs [action] [arg] [...] -KEY VALUE [...]'
						div {
							div > 'All this arguments will be parsed to a config object'
							div.hint > '@see supported actions'
						}
					}
					li {
						code > ' > includejs [*.html] -minify -KEY VALUE'

						div > '
						If first argument is html file, then this path will be set in config for "file" property, and "build" for action.
						 You can also sepcify some additional config values for this build - @see "build" action.
						'
					}
					li {
						code > ' > includejs [*.config | *.js]'
						p {
							'Load config and process'
							div > '*.config — JSON'
							div {
							 	'*.js — This javascript must set "config" to globals: ' tt > 'global.config = {OBJECT}'
							}
						}
					}
				}
				h3 > 'Config'
				div.hint {
					'Config contains one or more actions. (One action is an Object, more actions is Array of Objects) '
				}
				div {
					'Available actions and their settings:'
				}
				ul{

					li {
						ul {
							li > '{'
							li { '"action": "' b > 'build' '"' }
							li > '"file" — {String} - HTML input file'
							li > '"vars" — {Object} — Variables used when parsing includes'

							li > '"minify" — {Boolean} — run MinifyJS and clean-css'
							li > '"uglify" - {Object:optional} - UglifyJS compressor settings. @default {global_defs: {DEBUG: false}}'
							li  {
								'"jshint" : {'
								ul {
									li > '"options" - {Object} - JSHINT options'
									li > '"globals" - {Object} - global variables. @default {"window": false, "document": false}'
									li > '"ignore" - {Object} - file names to ignore'
									li > '}'
								}
							}
							li > '"outputMain" — output name of a built html — @default "{name}.build.html"'
							li > '"outputSources" — directory of combined/copied resources — @default "{name}.build/"'
							li > '}'
						}

						p {
							'Build includejs project.'
							div.hint > 'It will parse specified file and its resources, and will recursive collect all includes'
						}
					}
					li {
						ul{
							li > '{'
							li { '"action": "' b > 'project-import' '"' }
							li > '}'
						}
						p {
						  'Copy resources, that are used by current project, from referenced directories in '
							tt > '.reference/*' ' to ' tt >'.import' ' directory'
						}
					}
					li {
						ul{
							li > '{'
							li { '"action": "' b > 'project-reference' '"' }
							li > '}'
						}
						p {
						  'Create outer referencing in ' tt > '.reference/*' 'acording to routing defined in '
						  tt > '%npm-global-directory%/includejs/globals.txt'
						}
					}
					li {
						ul{
							li > '{'
							li { '"action": "' b > 'shell' '"' }
							li > '"command": /** Array or String :: string commands*/ ['
							li > '"cmd /C copy /B index.html c:/app",'
							li > '"cmd /C copy /B index.build/ c:/app/index.build" ]'
							li > '}'
						}
						p > 'Execuate shell commands'
					}
					li {
						ul {
							li > '{'
							li { '"action": "' b > 'custom' '"' }
							li > '"script": "scriptPath.js"'
							li > '}'
						}
						p > 'Execuate custom scripts'
						div.hint {
							div > 'Script shoud export object with .process(config, idfr) function.'
							div > 'After script is ready call idfr.resolve() for processing next actions'
						}
						div.hint {
							'If you want to call just that action only, you can do it from command line:'
							div > code > ' > includejs custom scriptPath.js'
						}
					}

					li {
						ul{
							li > '{'
							li { '"action": "' b > 'server' '"' }
							li > '"port": NUMBER /* optional @default  5777 */'
							li > '"open": Filename to open in browser /* optional */'
							li > '}'
						}
						p { 'Create server in ' tt > '%current-directory%' }
						div.hint {
							'To not create config file only for this action, you can use raw cli command with action argument:'
							div > code > ' > includejs server'
							'To open browser and additionally to define port:'
							div > code > ' >  includejs server index.dev.html -port 7777'
						}
					}
					li {
						ul{
							li > '{'
							li { '"action": "' b > 'reference' '"' }
							li > '"path": directory path || name of a project from globals.txt'
							li > '"name": reference name /* optional @default directory name*/'
							li > '}'
						}
						p > 'Creates symbolic link to specified path in %current_directory%/.reference/%name%'
						div.hint {
							div > 'Command Line calls: '
							div > code > ' > includejs reference c:/development/mylib'
							div > 'You can add this path to globals.txt, so afterwards you can call this as such:'
							div > code > ' > includejs reference mylib'
						}
					}
					li {
						ul{
							li > '{'
							li { '"action": "' b > 'template' '"' }
							li > '"name": name'
							li > '}'
						}

						p > 'Create Template Project in %current_dir%'
						p > 'Available: "starter" , "todomvc" (@sample application to fiddle around with maskjs,includejs etc.)'
						div.hint {
							'You can create any other templates with just coping needed files to '
							tt > '%npm-global-directory%/node_modules/includejs/template/%YourTemplateName%'
						}
						div.hint {
							'Raw cli command:'
							div > code > ' > includejs template starter'
						}
					}
					li {
						ul{
							li > '{'
							li { '"action": "' b > 'git-clone' '"' }
							li > '}'
						}
						p > 'Clones LibJS Libraries into current directory'
						div {
							'It will also save this path intern, for future routing - so calling this action,
								includejs should have
								write permissions to ' tt > '%npm-global-directory%/includejs' ' directory'
						}
						div.hint {
							'Command Line: '
							code > ' > includejs git-clone'
						}
					}
					li {
						ul{
							li > '{'
							li { '"action": "' b > 'globals' '"' }
							li > '}'
						}
						code > ' > includejs globals'

						p > 'Open globals.txt of includejs for editing of your routes, etc. Example of globals.txt:'

						prism src='/api.help/globals.js';

					}
				}
			}
			div.resources {
				h6 > 'Small note about external resources'
				p > 'Every application has some outer dependencies. Lets say you created empty project and want to use some classes, styles and images
				from you own library "MyCoolStuff". There are several ways you can do it.'
				ul {
					li {
						i > 'Bad — ''Copy them into working project. '
						div;
						u > 'Contra'' — '
						ul {
							li > 'you dont know always from start on what classes or styles you need'
							li > 'you have to work a lot with copy/paste - and this was always a mess.'
							li > 'they become part of the project. This is good for Release, but not for Development'
							li > 'harms code organization energy'
						}
					}

					li {
						i > 'Best — ''Use symbolic links'
						div > 'Example:'
						ul {
							li {
								'Install IncludeJS.Builder and LibJS libraries: ' a href='#/about/install' > '@how-to'
							}
							li {
								'Create template project'
								div > code > '> mkdir testProject && cd testProject && includejs template starter'
								div {
									'And now, under "testProject/.reference/libjs" you find a symbolic link to libjs project
									and all requests to libjs libraries, such as '
									tt > 'include.js({ lib: "mask" })' 'will path through that symbolic link'
								}
							}
						}

						p {
							'After your application is ready for release, you can build it - all resources will be combined, and no more referencing will occure'

							div.hint {
							  'Any time you can import all referenced resources to projects directory. '
							  i > 'You may need this, for example, for sending your dev-project to smbd. else.'

							  p > code > ' > includejs project-import'
							}

							p.hint > 'This will import only resources you use in your project (scripts, images, views, etc.), and not the whole directories.'
						}
					}
				}

			}
		}
	}

}