Setting up npm and gulp for front end development

Front end development (CSS and JavaScript) uses gulp to manage builds, with dependencies managed by npm.

First Steps

The first step is to install node.js on your machine. This varies by operating system, check here for instructions: http://nodejs.org/download

Setting up Gulp

Once node.js is installed, you need to install gulp:

npm install -g gulp

Installing dependencies

Navigate to the MyBB 2.0 directory:

cd <PATH TO WHERE YOU CHECKED OUT THE REPOSITORY>/
npm install

This will install several node.js modules that are required.

Adding dependencies

You can add dependencies by editing the package.json file, but it's preferred if you use the command line, as follows:

npm install --save-dev <PACKAGE NAME>

This will both install the package and save it to the dependencies list.

Compiling and minifying source

Once you've written some JavaScript or SASS, it'll need combined and minified for production. This can be done using gulp.js. From the root, you can do a full build as follows:

gulp

Or you can watch files for changes and compile automatically:

gulp watch

Future work

The current JavaScript implementation is messy and doesn't follow best practices. Before release, the javaScript will be rewritten to make use of JS modules and ES 2016 features such as classes.