Skip to content
jcreamer898 edited this page Dec 31, 2012 · 7 revisions

Anvil is compatible with Mac, Windows, and Linux.

The first step in running anvil is to install NodeJS.

Mac and Linux

If you don't already, it's recommended to use Node Version Manager (NVM) for managing installs of Node. You'll need to have XCode to compile c++.

  1. Install NVM curl https://raw.github.com/creationix/nvm/master/install.sh | sh
  2. Run nvm install x.x.x where x.x.x is the target version of Node. (v0.8.16 as of 12/31/12)
  3. Install anvil npm install -g anvil.js

Windows

  1. Download and Install node.js
  2. Install anvil npm install -g anvil.js

Basic Setup

Anvil is a Convention Over Configuration (CoC) build system. This means that a lot of the core features of anvil will work without a build.json file.

There are only a few default folders needed in a basic anvil setup.

  • src The source of whatever is being written.
  • spec Any unit tests should be located in the spec folder.
  • lib Where the output of the build will go. This folder gets generated automatically on the first run of anvil.

A simple JavaScript library example built with anvil

First off, anvil is plugin based even at it's core. One such plugin is anvil.mocha. To write good JavaScript libraries, you should write unit tests. So first install the mocha plugin.

anvil install anvil.mocha

To build a JavaScript library with anvil, first create a new directory with a src and spec sub directories.

Then create a file such as index.js or whatever name your heart desires.

The contents of index.js are.

//import("smiley.js")

module.exports.smiley = new Smiley();

Then create another file in the src directory called smiley.js.

The contents of smiley.js are.

var Smiley = function( options ) {
    options = options || {};

    this.options = {
        delimiter: options.delimiter || "\n"
    };

    this.log( this.getFace() );
};

Smiley.prototype.getFace = function() {
    var face = [
        "                       __ooooooooo__",
        "                oOOOOOOOOOOOOOOOOOOOOOo",
        "            oOOOOOOOOOOOOOOOOOOOOOOOOOOOOOo",
        "         oOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOo",
        "       oOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOo",
        "     oOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOo",
        "    oOOOOOOOOOOO*  *OOOOOOOOOOOOOO*  *OOOOOOOOOOOOo",
        "   oOOOOOOOOOOO      OOOOOOOOOOOO      OOOOOOOOOOOOo",
        "   oOOOOOOOOOOOOo  oOOOOOOOOOOOOOOo  oOOOOOOOOOOOOOo",
        "  oOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOo",
        "  oOOOO     OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO     OOOOo",
        "  oOOOOOO OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO OOOOOOo",
        "   *OOOOO  OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO  OOOOO*",
        "   *OOOOOO  *OOOOOOOOOOOOOOOOOOOOOOOOOOOOO*  OOOOOO*",
        "    *OOOOOO  *OOOOOOOOOOOOOOOOOOOOOOOOOOO*  OOOOOO*",
        "     *OOOOOOo  *OOOOOOOOOOOOOOOOOOOOOOO*  oOOOOOO*",
        "       *OOOOOOOo  *OOOOOOOOOOOOOOOOO*  oOOOOOOO*",
        "         *OOOOOOOOo  *OOOOOOOOOOO*  oOOOOOOOO*",
        "            *OOOOOOOOo           oOOOOOOOO*",
        "                *OOOOOOOOOOOOOOOOOOOOO*",
        "                     *ooooooooo*"
    ].join( this.options.delimiter );

    return face;
};

Smiley.prototype.log = function( msg ) {
    if ( console ) {
        console.log( msg );
        return msg;
    }
};

This is just a simple constructor for a smiley class with getFace and log functions on the prototype.

Next, add an index.spec.js file to the spec directory.

It's contents are.

var smiley = require( "../lib/index.js" ).smiley,
	expect = require( "expect.js" );

describe( "base smiley", function() {
	it( "should have a smiley", function() {
		expect( smiley ).to.be.ok();
		expect( smiley.getFace().indexOf( "  oOOOO     OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO     OOOOo" ) ).to.be.greaterThan( -1 );
	});
});

describe( "logger", function() {
	it( "should log messages", function() {
		expect( smiley.log ).to.be.ok();
		expect( smiley.log( "test" ) ).to.be( "test" );
	});
});

These tests test some of the basic functionality of our smiley class.

Adding in browser support

Next, you might want to have a version of the smiley class that is compatible with the browser as well as node. Well thanks to anvil's imports that's a snap!

Create a new file called index.browser.js in the src folder and it's contents will be...

(function( global ) {
	//import("smiley.js")

	global.smiley = new Smiley();
}( window ));

Then you can create a new HTML file in the src directory such as index.html and make it's contents be...

<!DOCTYPE html>
<html>
<head>
	<title>Smiley</title>

</head>
<body>
	<pre id="smiley"></pre>

	<script src="index.browser.js"></script>
	<script>
		document.getElementById( "smiley" ).innerHTML = smiley.getFace();
	</script>
</body>
</html>

Now you'll want to make sure your library runs correctly in the browser.

To do this, run...

anvil install anvil.http

And then once that is done...

anvil --host --ci --browser

--host runs a server by default hosting your src directory at localhost:3080. The --ci flag will automatically re-run anvil as well as refresh the browser anytime a file changes, and the --browser flag will pop open the site in the default browser.