# Gulp

Using the gulpfile provided with Jumpstart.

###

Build, Serve and Watch: `gulp`

Running `gulp` in the Jumpstart folder will compile the sources to `dist` then start a local Browsersync instance on port `3000` to serve and refresh your pages as you edit.

The default task runs the following operations:

- clean:dist : The `dist` folder is emptied. All files in `dist` are deleted.
- html: All `.html` files are copied from `pages` to `dist`. Only newer files are copied.
- sass-min: Compiles `theme.css` and `theme.min.css` from `scss/theme.scss` to the `dist/assets/css` along with appropriate `.map` files.
- bootstrap-js: Compiles and minifies all Bootstrap javascript files to `bootstrap.js` and `bootstrap.min.js` in the `dist/assets/js` folder.
- mrare-js: Compiles and minifies all Medium Rare javascript files to `theme.js` and `theme.min.js` in the `dist/assets/js` folder.
- copy-assets: Copies any newer files from `pages/assets` to `dist/pages/assets`.
- serve: Starts a Browsersync instance on port `3000` served from `dist`, defaults to `index.html`.
- watch: Monitors the following files and runs the corresponding tasks:
  - `pages/*.html`, then runs the html task.
  - `scss/*.scss`, then runs the sass-min task.
  - `js/bootstrap/*.js`: then runs the bootstrap-js task.
  - `js/mrare/*.js`: then runs the mrare-js task.
  - `assets/*.*`: then runs the copy-assets task.

NOTE: Medium Rare javascript is linted through gulp-eslint according to the Airbnb rules preset, and is configured in the `.eslintrc.json` file in the project root. If the linting fails, the Gulp process will quit with an error. If you edit any Medium Rare javascript files and encounter a linting error, simply correct the error and re-run `gulp`. This is done to prevent distribution of unlinted code.

The Browsersync server and Gulp's watch task will continue to run until instructed to quit via Ctrl+C or if the terminal/command window is closed.

When the server process quits, the `dist` folder is left intact with the latest version of compiled files within.

###

Build Only: `gulp build`

Compiles a full, clean copy of the theme to the dist folder. Does not run watch or serve (Browsersync) tasks.

###

Updating dependencies: `gulp deps`

Conveniently pull in updates to plugin files by running `npm update`. This downloads the latest files from npm and places them in the `node_modules` folder.

The files must then be moved from `node_modules` to `assets`, `js`, or `scss`. To automatically move the updated files from `node_modules` to your source and assets folders, run `gulp deps`.

Some packages which are not available on npm cannot be updated in this way and must be downloaded and updated manually.

Bootstrap scss and javascript files are not yet updated in this way as some changes may break the theme. We will release periodic updates to the theme package to provide stable updates for Bootstrap.