# Gulp

We are using [Gulp.js](http://gulpjs.com/) as our task runner and build tool.

## How it is wired together

The ```gulpfile.js``` is in the root directory, however it only does two things:

- loads the core tasks (under ```/gulp-tasks/core```)
- adds the root directory to Node's search path, so we can now do this: ```require('core/server/utils')```

The structure:

```javascript
+-- gulpfile.js
+-- gulp-tasks/
    +-- core/
        +-- index.js // registering gulp tasks here
        +-- build-js.js // exports a javascript function
        +-- clean.js // exports a javascript function
        +-- lint-js.js // exports a javascript function
        +-- ...
    +-- your-tasks/
        +-- ...
    +-- gulp-config.json
```

## Core tasks

- **```$> gulp help```** prints out all the available tasks
- **```$> gulp build```** builds both Javascript and CSS files for the client
- **```$> gulp build:js```** builds the client Javascript only (Babel, JSX, concat, minify)
- **```$> gulp build:css```** builds the client CSS only (compiles SASS files, concat, minify)
- **```$> gulp clean```** removes every generated file (build output)
- **```$> gulp lint```** runs linting for both Javascript and CSS files
- **```$> gulp lint:js```** runs ESLint for the Javascript files
- **```$> gulp lint:css```** runs SASSLint for the CSS files
- **```$> gulp check```** runs both unit tests, e2e tests and lintings
- **```$> gulp run```** starts the web server
- **```$> gulp tests```** runs both unit tests and e2e tests
- **```$> gulp tests:unit```** runs unit tests only
- **```$> gulp tests:e2e```** runs e2e tests only
- **```$> gulp poll-tests```** runs both unit and e2e tests in watching mode
- **```$> gulp poll-tests:unit```** runs unit tests in watching mode
- **```$> gulp poll-tests:e2e```** runs e2e tests in watching mode
- **```$> gulp watch```** start watching changes in both Javascript and CSS files
- **```$> gulp watch:js```** start watching changes in Javascript files
- **```$> gulp watch:css```** start watching changes in CSS files

## Adding new tasks

If you would like to add new tasks, make sure you don't put them under ```/gulp-tasks/core```.
This folder may be automatically updated in the future.

Just create a new folder under ```gulp-tasks```:
```
+-- gulp-tasks
    +-- core/
    +-- my-tasks/
```

And register it in the main ```gulpfile.js```:

```javascript
// gulpfile.js

// add the following line
require('./gulp-tasks/my-tasks');
```