Tools

Local Dependencies

If you haven't done so already, please install the following:

Node
Gulp CLI via npm with npm install -g gulp-cli

If you are a Windows user and are having issues running gulp commands, please see here: http://stackoverflow.com/questions/24027551/gulp-command-not-found-error-after-installing-gulp

Project Installation

After you have node installed, in a terminal window (command line) navigate to the project folder and run npm install && npm run build. This will install the project dependencies and run the build tasks for the css and javascript.

Folder Structure

Folders are organized with the following main folders:

- assets
- documentation
- public
- src
- test
- tools
Gulpfile.js

assets/

Contains JSON files for airports, airlines, and aircraft. Individual files are named with the ICAO identifier that describes them. So an airport with an ICAO of KSFO will have an airport JSON file named ksfo.json, and so on. If you are a content creator, one who is adding Airports, Airlines or Aircraft, your .json/.geojson files should be added here. When running a build, the aircraft and airline json files will be combined and minified into aircraft.json and airlines.json and output to the public directory. Additionally, each airport and airport.geojson file runs through minification before getting output to the public directory.

public/

This is where the code that runs the application lives and when this application is deployed, it is these files that are used. This folder contains generated files as a result of build commands and thus is not in source control. Any changes made to files in this folder will be overwritten the next time a build command is run. If you need to edit CSS or Javascript files, please edit the files in the src folder.

src/

The application's CSS and Javascript source files. If you are developing Javascript or CSS, the files you want to edit live in this folder.

test/

Application test files. The folder structure here should mirror that of the src folder. For example, if you want to write some tests for the src/assets/scripts/math/circle.js file, it should live in test/math/circle.spec.js. If you are writing any new tests, they should go here. Any test file should have a **/*.spec.js file extension. Test files are run by folder then globbing pattern, so if you have a support file it should have just a .js extension. Testing is run via ava with coverage reporting generated by nyc. There are full HTML coverage reports available to view in the coverage/lcov-report folder.

tools/

Any gulp task is defined in one of the files in this folder.

Gulpfile.js

This is the entry point for all gulp tasks. There should never be a process defined in this file, just references to a tasks defined in the tools/tasks folder. The only exception to this is for root tasks like build, lint, watch, etc. These root tasks are just wrappers for a collections of other tasks.

NPM Commands

Available npm commands:

npm run start Will spool up an Express server. Once the server starts successfully, you can view the app at localhost:3003 in your web browser.
npm run build - Used for generating files for use in production
npm run build:dev - Used for generating files for use in development
npm run test- Will run the ava test suite and output a coverage report to the terminal window.
npm run report - Will generate a coverage report from the last test run. If only a specific subset of files was tested, the coverage report will reflect that. ex: npm run test -- test/math/ will run all the tests in the test/math/ directory and generate coverage for only the files tested. Any other file that is not related to the files being tested will be ignored in the coverage report.
npm run coverage - Runs the entire test suite and generates a coverage report.

Gulp commands

All the gulp commands defined in the Gulpfile are combined tasks, meaning they actually call other tasks defined in the tools/tasks folder. The main gulp commands defined in this file are:

gulp build - Concat, minify autoprefix CSS to assets/styles/main.min.css with sourcemaps, transpile and browserify javascript to assets/scripts/bundle.js with sourcemaps
gulp dist - Everything gulp build does plus run eslint and output a per-file report of errors and warnings.
gulp watch - Watches for changes for css and javascript files and runs an associated compilation task if a change is detected.