#Meal A customizable scaffolding CLI tool.

$ meal make news card

Creates:
- /path/to/your/html/components/card-news.html
- /path/to/your/scss/components/_card-news.scss
- /path/to/your/js/components/_card-news.js

And replaces all string occurences in your templates:
html -
	<div class="card-COMPONTENT"... ->
	<div class="card-news"...
scss -
	.card-COMPONTENT... ->
	.card-news...
js   - 
	getElementByClassName('card-COMPONTENT')... ->
	getElementByClassName('card-news')...

##Installation

first install it globally

$ npm install meal -g

Then call init in your project folder to generate the meal.json

$ meal init

##Why

Consistent: By using consistent templates you can increase quality, enforce patterns and methodologies, add complexity, and maintain best practices.

Speedy: Generate the boilerplate you need to get started in an instant. By keeping your files abstract and modular, you no longer have to worry about adding weight to a project by including an entire framework.

Organized: Meal keeps your uncompiled files neatly named and organized within your source folder. Say hello to the simple yet effective "[component-type]-[component-name]" naming convention.

$meal make news card

Source:                    After:                Or After (component_types_as_dirs enabled)
card/ingredient.html       card-news.html        cards/news.html
card/ingredient.scss       _card-news.scss       cards/_news.scss
card/ingredient.js         _card-news.js         cards/_news.js

##meal.json After installation, you can specify the meal options:

{
	"ingredients": [
		{
			"type": "html",
			"output_type": "html",
			"component_types_as_dirs": true,
			"path": "/resources/markup/html/components",
			"prefix": ""
		},
		{
			"type": "scss",
			"output_type": "scss",
			"component_types_as_dirs": true,
			"path": "/resources/styles/scss/components",
			"import": {
				"name": "style.scss",
				"path": "/resources/scss/"
			},
			"prefix": "_"
		},
		{
			"type": "js",
			"output_type": "js",
			"component_types_as_dirs": true,
			"path": "/resources/scripts/js/components",
			"prefix": "_"
		}
	],
	"components_dir": "/ingredients"
}

###ingredients

Property | Description | Example --- | --- | --- type | The type of the source file's template | ingredient.html output_type | The filetype that the source will compile to | ingredient.html -> card-name.php path | The path to the output folder | /public/includes prefix | The file's prefix | **_**markup.html component_types_as_dirs | whether to output into separate directories or not | false -> ../card-name.php, true -> ../card/name.php import.name | the name of the scss importing file | style.scss import.path | the path to the importing file | /resources/assets/scss/

###components_dir Spcifying the components directory will tell meal where to look for the template files.

##Commands

Command | Description | Example --- | --- | --- init | Creates a meal.json in your current directory | meal init list | Lists all generatable components | meal list make [NAME] [TYPE] | generates files from the [TYPE] template using the [NAME] | meal make news card

###Make options

Option | Description | Example --- | --- | --- --x__[TYPE]__ | Skips the [TYPE] file generation | meal make some card --xjs --xscss (Will skip the scss and js files)

##Template Files

By default there are template files bundled with meal, however it is understandable that you may like to create your own... ingredients...

To start, go through the steps in the installation section then after running $ meal init edit the meal.json file's components_dir property to point where ever you like in your project directory (maybe something like "resources/meal_templates").

Within the templates folder, each sub folder will represent a separate component. Within each subfolder you will need to create three separate files:

• ingredient.html
• ingredient.scss
• ingredient.js

When you run the $ meal make news card, meal will look for the card directory in your defined templates folder. From there it will copy over the contents respectively and create new component files as per the paths in your meal.json.

Before writing the new files, meal searches and replaces any occurence of the keyword (case sensative) COMPONENT with the defined component name. For example the following will grab the contents of the files within the card directory.

$ meal make news card

Next it will replace all occurences of COMPONENT with news

<!-- Template file -->
<div class="card-COMPONENT"><div>

<!-- Generated file -->
<div class="card-news"><div>

###Component Naming Casing

The current casing control that meal allows when writing your template files is as follows:

String | Render | Example (using "news") --- | --- | --- COMPONENT | Lowercase | card-COMPONTENT -> card-news !COMPONENT | Capitalize | card-!COMPONTENT -> card-News !COMPONENT! | Uppercase | card-!COMPONTENT! -> card-NEWS