makatto

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

npm install makatto
67 downloads in the last month

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 - All less files will be compiled
  • Swig - All html files will be parsed and compiled using Swig templating engine
  • Pngout - All png files will be optimized with this tool (disabled by default, see Configuration and the imgmin option)
  • Uglify-js - 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 the SRC folder (where you develop your web) ./src
dist* Path to the DIST folder (where your web will be built) ./dist
tplroot* Path to the templates root folder (used as a root for templating engines). The path must be relative to the SRC folder html
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
browsers* Array of paths to browsers, which will be opened after running makatto. This option cannot be used as a CLI argument (config file only) []

* Paths should use / or \\ as a separator!

Override defaults with CLI arguments

makatto --server --port <port> --src <path_to_src> --dist <path_to_dist> --tplroot <path_to_tplroot> --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:

{
  "port"          : 8888,
  "src"           : "c:/web/source",
  "dist"          : "c:/web/build",
  "tplroot"       : "html",
  "livereload"    : true,
  "jsmin"         : true,
  "cssmin"        : false,
  "imgmin"        : true,
  "imgminMaxsize" : 15000,
  "browsers"      : [
    "c:\\Program Files (x86)\\Mozilla Firefox\\firefox.exe",
    "C:\\Users\\username\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe"
  ]
}

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
npm loves you