Front-end build system

Our front-end build system uses gulp and browsersync to make front-end development faster and easier. Once it has been set up, you can simply run gulp watch to have the css on the local web site update when you save your less files.

Required software

• Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices. This has been tested with Node v.0.12.0.
• NPM, the Node package manager. This has been tested with NPM v.2.5.1.
• Gulp, the asynchronous build tool for Javascript. This has been tested with gulp v.3.8.11.

Platform installation

To build and develop the frontend of Silobreaker you need to install a recent version of nodejs. This can be downloaded from nodejs.

Make sure node.js and npm are installed and the right version by running the command

> node -v
v0.12.0
> npm -v
2.5.1

Once nodejs and npm have been downloaded install gulp globally with

> npm install -g [email protected]
> gulp -v
[13:08:49] CLI version 3.8.11
[13:08:49] Local version 3.8.11

Gulp is used to handle the different packages that are needed to build the website.

Package installation

Once gulp is installed globally, you have to install the packages needed for the frontend build system. To do this, go to Silobreaker/Scripts/gulp (the location of package.json) and run

> npm install

Now test your installation with

> gulp

It should display all the gulp tasks that are available.

Tasks and flags

Main Tasks

• default lists all the available tasks.
• deploy runs compile:prod for now. Produces minified code for production use.
• develop runs compile:dev for now. Outputs code with sourcemaps, for development and debugging.
• watch runs compile:dev:watch and browser:external:sync. Continuously updates the browser when watched files (e.g. less-files) are saved.

Sub Tasks

• browser:external:static
• browser:external:sync
• browser:static
• browser:sync
• compile:dev:watch
• compile:prod
• less:dev
• less:dev:watch
• less:prod
• templates:angular:dev
• templates:angular:dev:watch
• templates:angular:prod

Flags

• --production Use this flag to use the config.prod.json configuration. Often combined with the deploy task.

Configuration

All the configuration options for packages used in our build process are collected in the config.dev.json (for development work) and config.prod.json (for production deployment) files. It aims to collect sensible defaults for the packages we use. Users can override development default options in the config.local.json file, which is ignored by git.

Example config.local.json

This configuration will make browsersync sync with both Firefox and Chrome, always initialize at the HotSpots.aspx page, and not display log messages in the console. See the browsersync documentation for more info.

{
    "browser": {
        "options": {
            "logLevel": "silent",
            "startPath": "HotSpots.aspx",
            "browser": "firefox"
        }
    }
}

Deployment to production

When you want to deploy this for the production environment, run all the commands with the --production flag, like

> npm install --production
> gulp deploy --production

This will install only the production dependencies, and use the production config file when building with gulp.

Dependencies

To make sure the project builds correctly, all the dependencies are exact.

Dependencies

• gulp: 3.8.11
• gulp-autoprefixer: 2.1.0
• gulp-base64: 0.1.2
• gulp-combine-media-queries: 0.2.0
• gulp-less: 3.0.0
• gulp-minify-css: 0.4.5
• gulp-minify-html: 0.1.8
• gulp-ng-template: 0.1.2
• gulp-plumber: 0.6.6
• gulp-rename: 1.2.0
• gulp-task-listing: 1.0.0
• gulp-util: 3.0.3
• lodash: 3.2.0
• yargs: 3.0.4

Development dependencies

• browser-sync: 2.1.6
• gulp-sourcemaps: 1.3.0
• open: 0.0.5

These are specified in the package.json file.