markab

An instant web frontend dev tool

npm install markab
32 downloads in the last month

Markab

This project has been abandoned! Please head over to Yeoman !


Have you ever wanted your web page to be live-reloaded when you're at development? If so, you should try markab:

$ markab server [project]

It will start a web server host the project directory, watching for file changes and refresh your browser automatically.

Installation

$ [sudo] npm install markab -g

Not just that...

Using markab you can quick initialize a new project with you own template or the build-in markab-template:

$ markab create project -l /path/to/your/template
$ markab create project -t basic

And more

Markab has LESS and Mustache support, so you can organize your code in a modular way. The only thing is to create a new directory named partial and put all your templates in there, and a new markab-data.json file for the template data if needed.

There's a typical structure for a new project

project/
  - index.html
  - index.css
  - mixin/
      - settings.less
      - base.less
  - partial/
      - header.html
      - body.html

Inside the index.html and index.css they may look something like the following:

<!doctype html>
<html>
<head>
  {{> header }}
</head>
<body>
  {{> body }}
</body>
</html>
@import "mixin/settings"
@import "mixin/base";

No need to include extra files in your page and pre-compile by your own. The markab server will handle all these for you.

And build it in one place

$ markab build -o release

This will combine and generate all files in the current directory into the release folder.

You may don't need mixin (partial is ignored by default) in the release, so you need to (i'm sorry) attach a .markab-ignore file inside the project. For instance:

mixin/**

After built the release folder it will look like this:

release/
  - index.html
  - index.css

Usage

$ markab --help

Usage: index.js [options] [command]

Commands:

  server [project]       start dev server
  create <project>       create new project
  build [project]        build the whole project to the target

Options:

  -h, --help                   output usage information
  -V, --version                output the version number
  -p, --port <port>            server port (defaults to 3000)
  -o, --output <output>        build destination
  -t, --template <name>        template name
  -d, --data <name>            data for for mustache template
  -l, --local-template <path>  local template path

License

MIT

npm loves you