makatto/README.md

Makatto is a simple webdev stack which which compiles source templates/assets and builds a production version of your website.

# Makatto

Makatto is a simple webdev stack which which compiles source templates/assets and builds a production version of your website.

It also can run as a HTTP server, which watches your files for changes, automatically compiles them and refreshes your browser.

## Built-in tools/preprocessors

  * **[LESS](http://lesscss.org/)** - All **less** files will be compiled
  * **[Swig](https://github.com/paularmstrong/swig/)** - All **html** files will be parsed and compiled using Swig templating engine
  * **[Pngout](http://advsys.net/ken/utils.htm)** - All **png** files will be optimized with this tool (disabled by default, see _Configuration_ and the `imgmin` option)
  * **[Uglify-js](https://github.com/mishoo/UglifyJS)** - All **js** files will be minimized with this tool (disabled by default, see _Configuration_ and the `jsmin` option)

## Install

```
npm install makatto -g
```

## Usage

### Building

Runs the build process once.

```
makatto
```

### Server

Runs the build process once initialy and then everytime some file changes.

```
makatto --server
```

Now point your browser to http://localhost:port (for `port` see _Configuration_) and start to edit your sources.

## Configuration

Key                          | Description                                                     | Default
---------------------------- | --------------------------------------------------------------- | -------
**src**                      | Path to tde SRC folder (where you develop your web)             | `./src`
**dist**                     | Path to tde DIST folder (where your web will be built)          | `./dist`
**cssmin**                   | Compress the CSS files (using LESS builtin compressing)         | `false`
**jsmin**                    | Compress the JS files (using uglify-js compressing)             | `false`
**imgmin**                   | Optimize images (using pngout)                                  | `false`
**imgminMaxsize**            | Maximum size (b) of file to optimize (bigger will be untouched). Value of `0` means "unlimited" | `0`
**port** (server only)       | Port on which tde HTTP and WebSocket server will run            | `9000`
**livereload** (server only) | Starts the server in live reload mode (see below)               | `false`

### Override defaults with CLI arguments

```
makatto --server --port <port> --src <path_to_src> --dist <path_to_dist> --livereload --jsmin --cssmin --imgmin --imgminMaxsize 15000
```

### Override defaults with `config.js` file

```
makatto --config path_to_config.js
```
    
An example of such config.js could be:

```javascript
{
  "port"          : 8888,
  "src"           : "c:/web/source",
  "dist"          : "c:/web/build"
  "livereload"    : true,
  "jsmin"         : true,
  "cssmin"        : false,
  "imgmin"        : true
  "imgminMaxsize" : 15000
}
```

## Live reload mode (server)

If the server is started in live reload mode, each HTML page gets a live reload javascript injected, which automatically reloads CSS/Images/Page after some files are changed:

  * If an image or CSS is changed and is present on page, it will be **hotswapped** without page reload
  * If a HTML page or a Javascript file is changed, the whole page is reloaded