Used in modern masonry to glue things and build frontages
CoffeeScript JavaScript CSS Gherkin HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


$ npm install -g mortero

Mortero is a collection of tasks for front-end development based on existing technologies:

  • Grunt for glue all other tasks
  • Bower for managing dependencies
  • Mocha for behavior-driver/unit testing
  • Y2NW for acceptance/functional testing
  • BrowserSync for quick development workflow
  • Tarima for all the required templates
  • Webpack for bundling the application
  • and so much more for linting, minification, benchmarks, etc.

Creating a new project

Create a new project by running the do command:

$ mortero do my-app

That will create the follow files and directories:

└── src
    ├── env.yml           <- environment
    ├── bundle
    │   ├── main          <- application (logic)
    │   ├── spec          <- testing (mocha)
    │   └── test          <- testing (y2nw)
    ├── assets            <- resources (A)
    │   ├── fonts
    │   ├── images
    │   └── sprites
    │   └── styles
    │   └── views         <- application (templates)
    ├── public            <- public pages
    └── static            <- static files

How this works?

By default mortero provides three basic task workflows which are described below:

  • dev — build assets → bundles the application → watch for changes
  • test/spec — bundles the application → build & run tests
  • build — bundles the application

Environment file

This env.yml file holds global configuration for the application.

The default environment is development, if you're building is production, anyway you can override it using -e|--env on the command line.

Application files

The files src/bundle/main are the application logic.

You can structure your modules as you want but only a single entry-point is required for webpack (index).

Template files

Files in src/assets/views are the templates for the whole application.

  • Only files having a .js extension files will be bundled as the JST variable
  • ENV and pkg global variables will be available within the precompile-pipeline


Files in src/assets (except views) will be handled as follows:

  • scripts and styles are precompiled
  • images and fonts are copied
  • sprites are processed

During the build you can enable all optimizations using the -m|--min flag.


Within src/bundle you have test and spec, for y2nw and mocha respectively:

  • Only the files suffixed as *-spec.{coffee,litcoffee} will be tested with mocha
  • For y2nw you must describe our application features and steps respectively
  • You can use -b|--browser in the command line to test a particular browser
  • Use -w|--watch for enable watching while your work