-
Notifications
You must be signed in to change notification settings - Fork 15
Getting Started
Anvil is compatible with Mac, Windows, and Linux.
The first step in running anvil is to install NodeJS.
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++.
- Install NVM
curl https://raw.github.com/creationix/nvm/master/install.sh | sh
- Run
nvm install x.x.x
where x.x.x is the target version of Node. (v0.8.16 as of 12/31/12) - Install anvil
npm install -g anvil.js
- Download and Install node.js
- Install anvil
npm install -g anvil.js
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.
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.
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.