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.