Gulp Install

Although Gulp is not required to use this theme, JointsWP does come with a gulpfile.js, making it extremely easy to get up and running quickly.

While “the best” way to use the theme is the way that works best for you, using Gulp is definitely the workflow I recommend to get the most out of the theme.

Getting Started

  1. Install node.js
  2. Using the command line, navigate to your theme directory
  3. Run npm install
  4. Run gulp to confirm everything is working

Note: If you run into issues, try installing Gulp globally by running npm install gulp -g.


Gulp Tasks

Watching Files for Changes

Running gulp watch will watch your assets/js/scripts and assets/sass directories for any changes and automatically run the related tasks.

Compiling Sass

Running gulp styles will compile all of your Sass files from your assets/sass directory into the assets/css directory. It will create a minified and non-minified file – by default, the theme will enqueue the non-minified file.

Compiling Custom JavaScript

Running gulp site-js will combine all of your custom (non-Foundation) JavaScript files from your assets/js/scripts directory into one file in the assets/js directory.

Running this task will create a minified and non-minified file – by default, the theme will enqueue the non-minified file.

Compiling Foundation

Running gulp foundation-js will compile all of your Foundation JavaScript files from your vendor/foundation/js/ directory into the assets/js/min directory. It will create a minified and non-minified file – by default, the theme will enqueue the minified file.

The gulpfile.js allows you to easily select which Foundation files you want to use. By default all Foundation components are loaded.


gulp.task('foundation-js', function() {
  return gulp.src([	
  		  
  		  // Foundation core - needed if you want to use any of the components below
          './vendor/foundation-sites/js/foundation.core.js',
          './vendor/foundation-sites/js/foundation.util.*.js',
          
          // Pick the components you need in your project
          './vendor/foundation-sites/js/foundation.abide.js',
          './vendor/foundation-sites/js/foundation.accordion.js',
          './vendor/foundation-sites/js/foundation.accordionMenu.js',
          './vendor/foundation-sites/js/foundation.drilldown.js',
          './vendor/foundation-sites/js/foundation.dropdown.js',
          './vendor/foundation-sites/js/foundation.dropdownMenu.js',
          './vendor/foundation-sites/js/foundation.equalizer.js',
          './vendor/foundation-sites/js/foundation.interchange.js',
          './vendor/foundation-sites/js/foundation.magellan.js',
          './vendor/foundation-sites/js/foundation.offcanvas.js',
          './vendor/foundation-sites/js/foundation.orbit.js',
          './vendor/foundation-sites/js/foundation.responsiveMenu.js',
          './vendor/foundation-sites/js/foundation.responsiveToggle.js',
          './vendor/foundation-sites/js/foundation.reveal.js',
          './vendor/foundation-sites/js/foundation.slider.js',
          './vendor/foundation-sites/js/foundation.sticky.js',
          './vendor/foundation-sites/js/foundation.tabs.js',
          './vendor/foundation-sites/js/foundation.toggler.js',
          './vendor/foundation-sites/js/foundation.tooltip.js',
  ])

Want to suggest or contribute changes to these docs? The JointsWP documentation is now hosted on GitHub! View or Edit this page on GitHub.