Skip to content

Getting started

Jump to bottom Edit New page
Marcin Kulik edited this page Mar 28, 2015 · 18 revisions

You can watch asciicast of this example:

asciicast

First of all install LMD and LMD CLI npm install lmd -g. LMD CLI is required to build package. This application prompt()s twitter login and prints link to twitter account with message in english.

This is structure of our application:

getting_started/
├── i18n
│   └── en.json
├── js
│   └── main.js
├── tpls
│   └── link.html
└── index.html

i18n/en.json - this is simple dict required for app localization :

// i18n/en.json
{
    "message": "Twitter profile of {link}"
}

tpls/link.html - this is our twitter link template:

<a href="http://twitter.com/{login}">@{login}</a>

And this is main script which prompt()s user name and prints link to twitter:

// js/main.js
var i18n = require('i18n'),
    link = require('tpls/link');

var login = prompt('Twitter login', 'twitter') || 'twitter', html;

html = link.replace(/{login}/g, login);
html = i18n.message.replace(/{link}/g, html);
document.getElementById('link').innerHTML = html;

To assemble all this files into one bundle we should create a .lmd/index.lmd.json file which will tell LMD that it should execute js/main.js on start and this build contains all required files and that i18n module is i18n/en.json and so on.

// .lmd/index.lmd.json
{
    // It is better to name your builds.
    "name": "Link to twitter account",
    // Define root of build. Default is dirname of current build file.
    "root": "../",
    // Modules section is kind of file-fs to module-fs map.
    "modules": {
        // You can define module using "key": "value"
        "i18n": "i18n/en.json",
        // Or find all .js files in js/ and declare all files as modules using file name
        // In our case it will match only one module "main"
        "*": "js/*.js",
        // It is possible to use complex naming expression to find and define all templates
        "<%= dir[0] %>/<%= file %>": "tpls/*.html"
    },
    // Tell lmd that it should execute main module on start.
    "main": "main",
    // And there LMD will print scripts bundle. Default is stdout.
    "output": "index.lmd.js"
}

See also Modules Naming Expressions

To see all available builds in getting_started you can use lmd ls command. To see what you will get before build you can use lmd info index command, which in our case will print:

info:
info:    LMD Package `index` (.lmd/index.lmd.json)
info:
info:    Link to twitter account
info:
info:    Modules (3)
info:
info:    name      depends type   lazy greedy coverage sandbox bundle
info:    i18n      ✘       json   ✘    ✘      ✘        ✘       ✘
info:    tpls/link ✘       string ✘    ✘      ✘        ✘       ✘
info:    main      ✘       plain  ✘    ✘      ✘        ✘       ✘
info:
info:    Module Paths, Depends and Features
info:
info:    i18n       <- /Users/azproduction/Projects/lmd/examples/demos/getting_started/i18n/en.json
info:    tpls/link  <- /Users/azproduction/Projects/lmd/examples/demos/getting_started/tpls/link.html
info:    main       <- /Users/azproduction/Projects/lmd/examples/demos/getting_started/js/main.js
info:     +-i18n
info:     +-tpls/link
info:
info:    Paths
info:
info:    root           /Users/azproduction/Projects/lmd/examples/demos/getting_started/
info:    output         /Users/azproduction/Projects/lmd/examples/demos/getting_started/index.lmd.js
info:    styles_output  /dev/null
info:    www_root       ✘
info:

If you miss some modules or modules are not exist lmd info will print notifications. Everything is ok - lets build it lmd build index, run http server and see what we get.

Like Grunt.js? - You can build LMD packages using grunt-lmd task.

See also:

Add a custom footer
Add a custom sidebar
Clone this wiki locally