meal v1.2.2

#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

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

##Commands

###Make options

##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: