spider-monkey

A web development environment for dabblers

Description

When playing with libraries like p5js and pixijs I want access to all the handy development tools I use professionally; but without the overhead of setting up a separate project for each little experiment.

This setup is an attempt to achieve that. I've started with parsing of SASS, Jade templates and linting and direct copying of JS; with browserSync handling automatic refresh duties. Browserify has been added. Babel and further improvements will follow as I put it to the test...

Installation

Make sure global dependencies are installed (see below) and then run npm install (as admin) from the root folder. That will install all the local dependencies listed in package.json.

Dependencies

• nodejs and npm (tested with 5.6.0 3.6.0)
• gulp (tested with 3.9.1)
• node-sass (tested with 3.4.2)

Optional dependencies

• Vagrant
• Git

Possible gotchas

Windows users

Node and npm on Windows still have some pain points. The path length issue happily appears a thing of the past; but that doesn't mean it's plain sailing. node-gyp in particular is still a significant enough problem to put me off. Having wasted too much time trying to figure it out, and being reluctant to install 7-8GBs of Visual Studio dependencies to get it working, I opted instead to use a Vagrant box running Ubuntu. I've included a Vagrant file that will set up the box with the appropriate global dependencies (make sure you're running your command line as admin on first vagrant up and when you run npm install).

Usage

• Add your source code, assets etc. to the src folder.
• Organise into folders as you see fit (an example of a typical setup for p5js is included).
• Run gulp from the command line. This will process existing files and shunt the results into a new 'dist' folder; fire up a server on localhost:8080; and do its best to auto-refresh when you save assets.
• If necessary manually run gulp clean to remove the dist folder