Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Used in modern masonry to glue things and build frontages
CoffeeScript JavaScript CSS Cucumber HTML
Branch: master
Failed to load latest commit information.
bin Fixed grunt-by-pass support for CLI
tasks Switch to imagemin; fix
.gitignore Fixed ignores due NPM
.npmignore Fixed ignore
.travis.yml OK
coffeelint.json Fixed tasks
package.json Switch to imagemin; fix


$ 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
Something went wrong with that request. Please try again.