artieziff/handlegrunt.md

## handlegrunt.md

      
    Raw
  

              handlegrunt.md
            
          
Installing Node
Installing grunt globally
Initializing a node app in local
Installing dev dependencies
Creating a grunt file
Configuring a local server (config, loading dependency, registering task)
Installing grunt-handlebars
Built-in Block Helpers (if/else, unless, each)
Installing grunt-watch
Partials
Installing grunt-uglify

npm install -g grunt-cli
npm init
npm install grunt --save -dev

GruntFile.js
'use strict';

module.exports = function (grunt) {

	// INIT SETTINGS

	grunt.initConfig({

		connect: {
			server: {
				options: {

					port: 8080,
					// keepalive: true,
					open: true,
					debug: true
				}
			}
		},

		handlebars: {
			compile: {
				files: {
					'js/templates.js':'hbs/**/*.hbs'
				}
			}
		},

		uglify: {
			my_target: {
				options: {
					preserveComments: false
				},
				files: {
					'js/handlegrunt.min.js': [
						'js/*.js',
						'!js/handlegrunt.min.js'
					]
				}
			}
		},

		watch: {

			hbs: {
				files: 'hbs/**/*.hbs',
				tasks: [
					'handlebars',
					'uglify'
				],
				options: {
					interrupt: true,
					interval: 700
				}
			},

			scripts: {
				files: [
					'js/*.js',
					'!js/handlegrunt.min.js'
				],
				tasks: ['uglify'],
				options: {
					interrupt: true,
					interval: 700
				}
			}

		}

	});

	// LOAD DEPENDENCIES

	grunt.loadNpmTasks('grunt-contrib-connect');
	grunt.loadNpmTasks('grunt-contrib-handlebars');
	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.loadNpmTasks('grunt-contrib-uglify');


	// TASK REGISTER

	grunt.registerTask('default', ['handlebars','connect', 'watch']);

};

main.js
function loadTemplate (elementId, config, template) {

	$(elementId).html(
		JST['hbs/templates/'+template+'.hbs'](config)
	);

}

$(document).ready(function () {

	loadTemplate('#main', {

		value: 'My title',
		people: [
			{firstName: 'Rick'},
			{lastName: 'Martin', firstName: 'Ricky'},
			{lastName: 'Astley', firstName: 'Ricky'}
		],
		html: '<div id="test"><p>HTML</p></div>',
		panel: {
			size: 'md',
			id: 'myPanel',
			title: 'My panel Title',
			body: '<p>Panel body</p>'
		}

	}, 'test');

});

_panel.hbs
<div class="panel panel-{{size}}" id="{{id}}">
	<div class="panel-header">
		{{title}}
	</div>
	<div class="panel-body">
		{{{body}}}
	</div>
	<div class="panel-footer">
		<button>OK</button>
	</div>
</div>

test.hbs
<h1>{{value}}</h1>
{{!-- comments --}}
<ul>

	{{#each people}}
		<li>
			{{#if lastName}}

				{{lastName}}, {{firstName}}

			{{else}}

				{{firstName}}

			{{/if}}
		</li>
	{{/each}}
</ul>

<ul>
	{{#each people}}

		{{#unless lastName}}

			<li>
				{{firstName}}

			</li>

		{{/unless}}

	{{/each}}


</ul>

{{{html}}}

{{>panel panel}}

<br>
THE END


index.html
<!DOCTYPE html>

<html>

	<head>

		<title>HandleGrunt</title>

	</head>

	<body>

		<div id="main"></div>

		<script src="js/libs/jquery-3.2.1.min.js"></script>
		<script src="js/libs/handlebars-v4.0.11.js"></script>
		<script src="js/handlegrunt.min.js"></script>

	</body>

</html>