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',
  ])
  • Paul Vincent

    Small typo at “Compiling Foundation” you mean “Running gulp foundation-js” instead “Running foundation-js”.

    Greetings

    • Jeremy Englert

      Nice catch! Fixed.

  • Paul Vincent

    I want to build a subset of the Foundation SCSS since I do not need all the plugin SCSS, any better recommendation then replacing

    JointsWP/assets/scss/style.scss

    // Import foundation.scss from Bower
    @import “../../bower_components/foundation/scss/foundation”;

    with the wanted parts like:
    @import ‘../../bower_components/foundation/scss/foundation/components/grid’;
    @import ‘../../bower_components/foundation/scss/foundation/components/button-groups’;
    @import ‘../../bower_components/foundation/scss/foundation/components/buttons’;

    ?

    Thanks

    • Jeremy Englert

      The way you listed should work.

      You could also move (and relink) all of the Foundation Scss files into your local project (instead of pulling from bower) then just comment out the imports you don’t want to use from foundation.scss.

  • Scott H

    Hey, Jeremy! I’m looking forward to getting started with Joints, but am having Gulp issues. Two questions:
    1) I’m using a local server and have Gulp installed, but am getting the ‘no Gulpfile found’ error. Is there a way to run Gulp from the parent directory, or is it always necessary to go all the way to themes/jointswp to run Gulp?
    2) I moved to the themes/jointswp folder, ran Gulp, and ended up with an error:
    C:Sitesdev-sitewp-contentthemesjointswp>gulp
    module.js:338
    throw err;
    ^
    Error: Cannot find module ‘gulp-util’
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:278:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object. (C:Sitesdev-sitewp-contentthemesjointswpgulpfile.js:3:13)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)

    Any help is greatly appreciated! Many thanks for any info.

  • Scott H

    Hey, Jeremy! Looking forward to getting into Joints and building some sites. Just seem to be having some errors/warnings. I finally got everything installed and updated, but I keep getting the following LONG list of warnings when I run Gulp. Haven’t touched any of the theme code yet. Any idea what could be causing these right out of the box? Thanks for any info!

    C:Sitesdev-sitewp-contentthemesdev-site-theme>gulp
    [21:34:26] Using gulpfile C:Sitesdev-sitewp-contentthemesdev-site-themegulpfile.js
    [21:34:26] Starting ‘default’…
    [21:34:26] Starting ‘styles’…
    [21:34:26] Starting ‘scripts’…
    [21:34:26] Starting ‘foundation-js’…
    [21:34:26] Finished ‘default’ after 182 ms

    C:Sitesdev-sitewp-contentthemesdev-site-themebower_componentsfou
    ndationjsfoundationfoundation.js
    line 137 col 7 Possible strict violation.
    line 140 col 19 Possible strict violation.
    line 144 col 9 Possible strict violation.
    line 163 col 7 Unnecessary directive “use strict”.
    line 205 col 6 Expected an assignment or function call and instead saw an e
    xpression.
    line 377 col 10 [‘data_options’] is better written in dot notation.
    line 378 col 10 [‘attr_name’] is better written in dot notation.
    line 379 col 10 [‘add_namespace’] is better written in dot notation.
    line 380 col 10 [‘bindings’] is better written in dot notation.
    line 381 col 10 [‘S’] is better written in dot notation.
    line 454 col 21 Use ‘===’ to compare with ‘null’.
    line 618 col 14 Unnecessary semicolon.
    line 619 col 12 Unnecessary semicolon.
    line 651 col 65 Missing ‘()’ invoking a constructor.

    ‼ 14 warnings

    C:Sitesdev-sitewp-contentthemesdev-site-themebower_componentsfou
    ndationjsfoundationfoundation.abide.js
    line 224 col 89 Missing semicolon.
    line 242 col 99 Missing semicolon.
    line 306 col 14 ‘el’ is already defined.
    line 344 col 18 ‘i’ is already defined.
    line 380 col 14 ‘el’ is already defined.

    ‼ 5 warnings

    C:Sitesdev-sitewp-contentthemesdev-site-themebower_componentsfou
    ndationjsfoundationfoundation.clearing.js
    line 64 col 25 ‘current’ is already defined.
    line 65 col 24 ‘target’ is already defined.
    line 92 col 45 Missing semicolon.
    line 94 col 45 Missing semicolon.
    line 96 col 65 Missing semicolon.
    line 99 col 41 Missing semicolon.
    line 102 col 36 Missing semicolon.
    line 175 col 19 Use ‘===’ to compare with ‘null’.
    line 227 col 16 Possible strict violation.
    line 239 col 9 Possible strict violation.
    line 246 col 55 Missing semicolon.
    line 334 col 48 Missing semicolon.
    line 414 col 8 Missing semicolon.
    line 474 col 90 Use ‘!==’ to compare with ‘0’.

    ‼ 14 warnings

    C:Sitesdev-sitewp-contentthemesdev-site-themebower_componentsfou
    ndationjsfoundationfoundation.dropdown.js
    line 76 col 28 ‘settings’ is already defined.
    line 317 col 23 Use ‘===’ to compare with ‘true’.
    line 322 col 25 Use ‘===’ to compare with ‘true’.
    line 342 col 25 Use ‘===’ to compare with ‘true’.
    line 362 col 24 Use ‘===’ to compare with ‘true’.
    line 376 col 25 Use ‘===’ to compare with ‘true’.
    line 413 col 30 Use ‘===’ to compare with ‘true’.
    line 418 col 57 Expected an assignment or function call and instead saw an e
    xpression.
    line 422 col 35 Use ‘===’ to compare with ‘true’.
    line 426 col 22 Expected an assignment or function call and instead saw an e
    xpression.

    ‼ 10 warnings

    C:Sitesdev-sitewp-contentthemesdev-site-themebower_componentsfou
    ndationjsfoundationfoundation.equalizer.js
    line 64 col 77 Missing semicolon.
    line 95 col 38 Missing semicolon.

    ‼ 2 warnings

    C:Sitesdev-sitewp-contentthemesdev-site-themebower_componentsfou
    ndationjsfoundationfoundation.interchange.js
    line 19 col 49 [‘small’] is better written in dot notation.
    line 21 col 49 [‘medium’] is better written in dot notation.
    line 23 col 49 [‘large’] is better written in dot notation.
    line 25 col 49 [‘xlarge’] is better written in dot notation.
    line 27 col 49 [‘xxlarge’] is better written in dot notation.
    line 135 col 28 ‘args’ is already defined.
    line 140 col 18 Missing semicolon.
    line 141 col 16 Don’t make functions within a loop.
    line 273 col 26 ‘path’ is already defined.
    line 274 col 26 ‘directive’ is already defined.
    line 277 col 25 ‘path’ used out of scope.
    line 277 col 55 ‘directive’ used out of scope.
    line 310 col 32 Did you mean to return a conditional instead of an assignmen
    t?

    ‼ 13 warnings

    C:Sitesdev-sitewp-contentthemesdev-site-themebower_componentsfou
    ndationjsfoundationfoundation.joyride.js
    line 64 col 37 Missing semicolon.
    line 102 col 25 Missing semicolon.
    line 165 col 11 Confusing use of ‘!’.
    line 264 col 17 Use ‘===’ to compare with ‘0’.
    line 473 col 21 Use ‘!==’ to compare with ‘0’.
    line 631 col 30 ‘joyridemodalbg’ is already defined.
    line 682 col 38 Use ‘===’ to compare with ‘null’.
    line 786 col 23 Missing semicolon.
    line 905 col 41 Missing semicolon.

    ‼ 9 warnings

    [21:34:29] Finished ‘scripts’ after 2.69 s

    C:Sitesdev-sitewp-contentthemesdev-site-themebower_componentsfou
    ndationjsfoundationfoundation.magellan.js
    line 175 col 12 Missing semicolon.

    ‼ 1 warning

    C:Sitesdev-sitewp-contentthemesdev-site-themebower_componentsfou
    ndationjsfoundationfoundation.orbit.js
    line 80 col 94 Unnecessary semicolon.
    line 164 col 63 Use ‘!==’ to compare with ”.
    line 172 col 66 Use ‘!==’ to compare with ”.
    line 181 col 6 Missing semicolon.
    line 185 col 6 Missing semicolon.
    line 283 col 11 Missing semicolon.
    line 343 col 46 Missing semicolon.

    ‼ 7 warnings

    C:Sitesdev-sitewp-contentthemesdev-site-themebower_componentsfou
    ndationjsfoundationfoundation.reveal.js
    line 246 col 17 ‘modal’ is already defined.
    line 292 col 20 Use ‘===’ to compare with ‘undefined’.
    line 342 col 23 ‘end_css’ is already defined.
    line 358 col 20 ‘settings’ is already defined.
    line 406 col 23 ‘end_css’ is already defined.
    line 421 col 20 ‘settings’ is already defined.

    ‼ 6 warnings

    C:Sitesdev-sitewp-contentthemesdev-site-themebower_componentsfou
    ndationjsfoundationfoundation.slider.js
    line 73 col 39 Use ‘!==’ to compare with ”.
    line 175 col 37 Use ‘!==’ to compare with ”.

    ‼ 2 warnings

    C:Sitesdev-sitewp-contentthemesdev-site-themebower_componentsfou
    ndationjsfoundationfoundation.tab.js
    line 100 col 20 Use ‘!==’ to compare with ”.
    line 111 col 41 Use ‘!==’ to compare with ‘undefined’.
    line 155 col 32 Missing semicolon.
    line 185 col 186 Missing semicolon.
    line 205 col 29 Use ‘===’ to compare with ‘undefined’.
    line 212 col 29 Use ‘!==’ to compare with ‘undefined’.
    line 226 col 50 Missing semicolon.

    ‼ 7 warnings

    C:Sitesdev-sitewp-contentthemesdev-site-themebower_componentsfou
    ndationjsfoundationfoundation.tooltip.js
    line 19 col 11 Bad line breaking before ‘+’.
    line 20 col 11 Bad line breaking before ‘+’.
    line 47 col 49 [‘medium’] is better written in dot notation.
    line 51 col 49 [‘large’] is better written in dot notation.

    ‼ 4 warnings

    C:Sitesdev-sitewp-contentthemesdev-site-themebower_componentsfou
    ndationjsfoundationfoundation.topbar.js
    line 349 col 50 [‘topbar’] is better written in dot notation.
    line 353 col 49 [‘small’] is better written in dot notation.
    line 357 col 49 [‘medium’] is better written in dot notation.
    line 361 col 49 [‘large’] is better written in dot notation.
    line 380 col 48 Use ‘===’ to compare with ‘true’.
    line 387 col 41 Use ‘===’ to compare with ‘true’.

    ‼ 6 warnings

    [21:34:35] Finished ‘styles’ after 9.28 s
    [21:34:35] Finished ‘foundation-js’ after 9.16 s

    C:Sitesdev-sitewp-contentthemesdev-site-theme>

    • Jeremy Englert

      Foundation does throw some JS warnings, but everything should compile. This is a Foundation “issue” – I think they’re looking to improve that in Foundation 6.

      • Scott H

        Awesome! I appreciate the quick response. Thanks for putting so much work into this project. Looking forward to getting into it.

      • Scott H

        So, I changed some _main.scss values after running Gulp and getting the warnings I pasted above. After the warnings show up, it goes back to the command line in the theme folder. No compiling seems to be going on. I’m obviously missing something as it doesn’t even seem to be watching for changes — haven’t changed the Gulpfile at all. Any thoughts? Many thanks!

        • Jeremy Englert

          Hi Scott, running “gulp” will run the “gulp styles”, “gulp scripts” and “gulp foundation-js”. If you want your files to be watched, run “gulp watch” – this will watch your JS and CSS files for changes.

          • Scott H

            Great! Thanks for the info. New to building WP themes, so I appreciate the help!

          • Scott H

            Seems my response didn’t go through last week. Thanks for the info! Much appreciated.

  • Penny Badowska

    Hi Jeremy

    I can’t get my scss to compile in css – I have done the following in the command line:

    Pennys-UK-2011-Mac-Mini:~ penny$ node -v

    v0.12.7

    Pennys-UK-2011-Mac-Mini:~ penny$ npm -v

    2.11.3

    Pennys-UK-2011-Mac-Mini:~ penny$ gulp -v

    [13:10:07] CLI version 3.9.0

    Pennys-UK-2011-Mac-Mini:~ penny$ cd /Applications/wordpress-4.1.1-0/apps/wordpress/htdocs/wp-content/themes/TTRC_Joints gulp styles

    Pennys-UK-2011-Mac-Mini:TTRC_Joints penny$

    Am I missing something? When I tried using CodeKit, it wouldn’t compile either.

    I am a complete newby to Sass…

    Thanks

    • Jeremy Englert

      Go into your TTRC_joints folder using terminal and run “npm install” first. This will install the Node modules you need for the Gulp tasks.

  • Mark Toner

    Hi,

    I just installed gulp using the instruction in this page but when I run gulp I get: -bash: gulp: command not found

    I am using OS X El Capitan. There is now a folder in my JointsWP-master theme folder called node_modules. Also, I have the correct entry in my $PATH variable as requested when I installed node /usr/local/bin

    I am new to Joints and scss. Please help.

    Thanks!

    • Shannon Schärer

      Same problem here…

      • Jeremy Englert

        What version of Node are you running?

    • Jeremy Englert

      I haven’t tested this on El Capitan yet.

      What version of Node are you running?

      • Mark Toner

        v4.1.2

        • Jeremy Englert

          A ton of changes occurred with Node shot up to 4.x.

          Have you tried downgrading to 0.12.7?

          • Mark Toner

            No I haven’t. Is Gulp likely to be kept supported? If so I may try downgrading as a temporary measure.

    • Ercan

      I am on Windows but this may help

      An important step is missed on the page I think Jeremy.

      npm install -g gulp

      You should call this command on node to use gulp on command line. It will display an error “command not found” otherwise.

      Also if you have installed/uninstalled different versions of Node beforely, delete node_modules directory at theme’s directory. Then run the command npm install again. Now gulp and gulp watch command will execute correctly.

    • CausesForChange

      This specific person probably doesn’t need this anymore but for other people perusing the comments section for a fix I did this:

      sudo npm install -g gulp

      put in my password and then

      gulp

      That did the trick.

      • Jeremy Englert

        Thanks! I added a note about this to the above docs.

  • Anthony G.

    Hi,

    I was wondering how the gulp site-js works with the F6 version… I put my js files in the scripts folder, and wanted to compile my custom js, and it felt funny running this command. Is there a gulp scripts-js or does gulp site-js still function?

    • Jeremy Englert

      gulp site-js replaced gulp scripts – simply for consistency.

      There are also gulp tasks for foundation-js and vendor-js. So site-js made the most sense.

      site-js is the custom JS that is specific to the site you’re working on.

      foundation-js compiles all of the F6 JavaScript components.

      vendor-js (recently removed) compiled all of the required vendor files.

  • Hugh.js

    Hi Jeremy. Really awesome that you’re providing this resource for free (that is correct right?).

    I’ve been learning web design for a little while and i’ve never touched on a CMS. Can you point me in the right direct of being able to create WordPress sites without using their INFURIATING and limiting UI/Visual builders? Is it possible to build websites coding on sublime text?

    Could you please give me some tips? I would really appreciate it!

    • devsaurus

      Check out http://wp-cli.org/ . It lets you create, edit, and manage your WordPress site from the CLI.

  • John Marshall

    Hi Jeremy. I’m on Windows 10 and have used Joints (F5) successfully recently before on this machine. I’m now trying to use the new F6 version, I follow the Gulp install instructions but when I type GULP I get Error: EPERM, operation not permitted ‘C:Usersjohn1.configconfigstorebower-github.yml’ – please can you help me out?

    • Ercan

      I have made a quick search and read that many solved the error by disabling their Antivirus program. You can try it John.

      • John Marshall

        Thank you – I saw this too but it seems not to help. Here is the entire output when I run GULP – please can anyone else help here? Really want to crack on and this is driving me crazy! Ha.

        C:mamphtdocslucaswp-contentthemesjointsnode_modulesgulp-bowernode_modulesbowernode_modulesconfigstoreindex.js:74
        throw err;
        ^
        Error: EPERM, operation not permitted ‘C:Usersjohn1.configconfigstorebower-github.yml’
        at Error (native)
        at Object.fs.openSync (evalmachine.:500:18)
        at Object.fs.writeFileSync (evalmachine.:1099:15)
        at Object.create.all.set (C:mamphtdocslucaswp-contentthemesjointsnode_modulesgulp-bowernode_modulesbowernode_modulesconfigstoreindex.js:64
        at Object.Configstore (C:mamphtdocslucaswp-contentthemesjointsnode_modulesgulp-bowernode_modulesbowernode_modulesconfigstoreindex.js:27:11
        at readCachedConfig (C:mamphtdocslucaswp-contentthemesjointsnode_modulesgulp-bowernode_modulesbowerlibconfig.js:19:23)
        at defaultConfig (C:mamphtdocslucaswp-contentthemesjointsnode_modulesgulp-bowernode_modulesbowerlibconfig.js:11:12)
        at Object. (C:mamphtdocslucaswp-contentthemesjointsnode_modulesgulp-bowernode_modulesbowerlibindex.js:16:32)
        at Module._compile (module.js:460:26)
        at Object.Module._extensions..js (module.js:478:10)

        • devpediabr

          Hey, run using Window PowerShell in Admin Mode 😀

        • devpediabr

          Also, try to run npm install again. I got this error using powershell without admin mode. I re-run npm install in Admin Mode and it’s working fine now.

    • Jeremy Englert

      Hi John,

      I’m not super familiar with Windows, but it looks similar to an error I was once recieving. The only way I was able to fix it was to completely uninstall Node/NPM and reinstall those tools.

      You can also try clearing your NPM cache – this seems to work for alot of people: https://github.com/npm/npm/wiki/Troubleshooting

  • Jack Fearing

    Hello Jeremy, is there a way to change the background color of the off-canvas mobile menu without effecting the main content background color. For instance, I’m using theme customizer (is this instance) to change the color of the main background screen. To get theme customizer to work with your them I needed to use the snippet below to override the default off-canvas-content background color. Attached is a screen shot.

    .off-canvas-content { background: inherit; }

    This works fine but it also effects the off-canvas mobile menu background. In Joints 3 I believe you had the menu wrapped in an aside tag and span 100% of the height. This menu also used a dark gray for it’s default color.

    Hopefully that makes sense.

    • Jeremy Englert

      Hi @jackfearing:disqus,

      JointsWP 4 uses Foundation 6, so the styling is a bit different now.

      I’m having a hard time replicating the issue. I added a color to .off-canvas-content and it only applied to the main content area.

      Can you provide a link so I can take a peak?

      • Jack Fearing

        Sure do… Below is the link. Also, I should mention that I’m using WordPress’ theme customizer to change the color of the background. See image for reference.

        http://dev.cloudfear.net

        • Jeremy Englert

          Instead of putting the “custom-background” class on the body element, but it on the “off-canvas-content” element.

          • Jack Fearing

            I think that class is automatically being added by this php function:

            <body >

            Strange thing is that your previous theme had no problem with using this function of theme customizer. Have you gotten theme customizer to work with your latest theme?

          • Jeremy Englert

            Customizer works fine. It’s simply how F6 styling works now.

            Try this for your CSS – this should work:

            body.custom-background .off-canvas-content {background: pink;}

          • Jack Fearing

            That seemed to work though what if I wanted to change the color of the off-canvas menu background. Basically what I’m trying to achieve is a dark off-canvas menu and a colored main canvas.

          • Jeremy Englert

            Use “body.custom-background” for the off-canvas background color. (You can also use “.off-canvas.position-right”).

            Use “body.custom-background .off-canvas-content” for the main-content background color.

          • Jack Fearing

            Thanks — that did the trick.

  • http://foundation.tadam.co.il/ Adam

    Very good job! Now I’m building a site based on your template. God bless you

  • Robert Shepherd

    Just wanted to chime in and say hi Jeremy. I build websites using Themes from Theme Forest, or if I need something custom, i use Genesis.

    But what I really want to do is develop themes myself and join the crowd who sell themes. I’ve read up on Foundation (and Bootstrap) and my heart says go with Foundation. Then I found JointsWP. I’ve never used Gulp, Sass, or any other tools like that so have a lot to learn.

    But I just wanted to say hello and thank you for taking the time to develop JointsWP. I look forward to learning all about it.

    • Jeremy Englert

      Awesome! Would love to see what you come up with.

  • Marvin Sohiong

    After npm install i receive “gulp is not recognized as an internal or external command” when i type gulp or gulp watch any idea?

  • Nev

    Hi Jeremy, I think you have an error in these docs:

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

    The gulpfile processes custom scripts in the assets/js/scripts directory, not the assets/js/site directory.

    • Jeremy Englert

      Thanks for catching that! All fixed.

      • Nev

        No prob man, thanks for the great work!

  • Nathan

    What’s the exactly workflow to exclude Foundation elements, please. I commented out some lines from the gulp.js, but there are still 5000 lines of css inside the main.css. Are there step by step instructions somewhere? In Foundation 5 I used the app.scss for that and just savung it, does the job. Thanks in advance!

  • Byron Allen

    Hey Jeremy,
    First of all want to say a big thanks for JointsWP and the work you put into it. I haven’t had any problems running sass with the ‘gulp watch’ command previously but over the last two days I run the same command and when I go to save any sass partial it duplicates the folder as a .css eg i’ll save _main.scss and _main.css will automatically occur This causes an error to say ‘please delete or rename all but one of these files’. I try to solve 99% of my problems by myself but this one has thrown me and is really frustrating.

    Would there be any reason for this? has anyone else had this trouble? How do I fix it?

    I’m using cloud9 as my ide.

    cheers
    Byron

    • Jeremy Englert

      Are you also running CodeKit? It sounds like something is compiling the Sass in addition to Gulp.

      Does Cloud9 compile Sass by chance?

      • Byron Allen

        Hey Jeremy,

        No I’m not running codekit. I installed sass for another project but I don’t think they should conflict and deleted that ruby gem anyway. it’s still duplicating?

        When I go into the duplicated css folder it comes up with errors saying a variable hasn’t been found, for example $white, All the variables with errors seem to come from the _settings.scss file which I haven’t changed at all and is imported correctly to _style.scss.

        Any other suggestions? It’s really holding up a project.

      • Byron Allen

        Hi Jeremy .

        Problem solved thanks, it was a command I set in cloud 9. Thanks for the reply before though appreciate it.

        Cheers
        Byron

  • Brock

    I’m using the Sass version of Joints and it’s working great. However, is installing npm with every project necessary?
    I’m wondering if there’s a way to install npm globally and link to it from my project? Or have the project find it automatically?
    Or am I misunderstanding something here.

  • Mark

    Hi Jeremy, thanks for putting out this Foundation 6 WP starter theme! I’m experimenting at the moment with this and FoundationPress looking for the best/clean base for building my themes in. JointsWP is working great with codekit however I can’t get the gulp commands to work with gulp/terminal/ which I’d rather use at the moment. The ‘npm install’ works but ‘gulp’ and ‘gulp watch’ are not found. I was wondering also if JointsWP was built from the ground up or based on a barebones theme like underscores? Thanks alot!

    • Jeremy Englert

      You may need to install Gulp globally, try this: npm install -g gulp

      JointsWP was originally built on-top of Bones. But there is hardly much likeness between the two now.

      • Mark

        Thanks Jeremy, I’ll try your suggestion

  • peasantwizard

    Very useful work, thank you!

    Followed the browser-sync discussion on Github and appreciate the new gulpfile.js. Works great and now that it’s integrated, should the docs be updated with a brief explanation of ‘gulp browser-sync’?

    I’m not a super advanced user and would miss out on this if I hadn’t been digging around Github.

    • Jeremy Englert

      Thanks for checking it out! I’m making a couple other small changes, including adding sourcemaps. Then I’ll push it to the master branch and update the docs. I’ll probably make a short video going over the process as well.

    • Brad Hartshorn

      Hello, I’ve been unsuccessful trying to get the new browser-sync going. I updated my proxy URL (line 118 in gulpfile.js). Is there a command I need to run? Would you mind posting a link to that Github discussion?

  • Brad Hartshorn

    Hi Jeremy, I’ve been working with JointsWP to make a site and It’s been awesome. I made it on my computer with Xampp and successfully got transferred to a live server. Now for the revision process, I’d like to set up some version control using Git and cloning my repository to Bitbucket. I’ve been having trouble with this. I’ve heard it’s not easy to get a repo of wordpress live and this is a good setup to start with: https://github.com/markjaquith/WordPress-Skeleton. So I’ve got this all set up – I’ve been experimenting with starting a new site from scratch – but I can’t seem to install JointsWP Sass version. I imagine it’s because the standard wordpress file structure has changed. Do you have any thoughts, pointers or hints on either making this work or taking a step back and using a different version control method? Thanks a billion!

    • Jeremy Englert

      JointsWP should work within that structure. You would need to put JointsWP into the content/themes folder. However, I’m not completely familiar with that setup and it looks like it’s been awhile since it’s been updated.

      I know many users who use JointsWP with the WP Engine Git Control (http://bit.ly/1Qs4syA) without issue. However, it’s not something I’ve dove into too much.

      However, there isn’t anything in JointsWP that would make it have issues with Git.

      I’d be interested to see what you come up with.

      • Brad Hartshorn

        Thanks for your thoughtful and quick reply! Sorry, I tried to take that comment down since I figured it out, but I appreciate your reply. It does work fine when I follow your instructions and install npm in the “theme directory” – I wasn’t paying attention; all this figuring out git and hooking everything up has left me a bit scramble brained. I’ll def check out WP Engine Git Control. And as soon as the revisions are all done and my project is complete I’ll be sure to share it with you, humble beginner site that it is.

  • jkinley

    Jeremy,

    Thanks again for all the hard work you have put into this. I will buy you a beer if I see you at a WordCamp someday. Node is installed via brew. Anyway, I downloaded the Sass version. I opened terminal and used cd to get to the theme directory. There, I typed gulp and it gave an error saying that gulp was not intalled locally. So I did npm install gulp and it did so. Then I ran gulp from the root directory and it threw up some errors. Cannot find module gulp-sass, etc. Any ideas?

    • jkinley

      Ok. I think it was dependances. I am installing now. Jeremy, you don’t have any mention of installing dependances above. Do you think others might get stuck on this? Hope my ingnorance sheds some light!

      • jkinley

        After installing all the Gulp dependencies we have success!

        • Jeremy Englert

          Hi Jeff,

          Running ‘npm install’ from inside your theme should install all of the necessary dependancies (including Gulp). In some cases, you will also need to install Gulp globally.

  • Bruce McKenzie

    This is great. Thank you.

    I hadn’t used gulp before, but it seems to work ok in spite of my ignorance. The “styles” command works fine for the files that came with the distro — and I understand that most styling should be done in _main.scss.

    But how would I add a limited use custom.css file, like login.css? Simply creating _custom.css in the scss directory doesn’t do the trick, as I had hoped. Changes to it causes the styles task to run, but it doesn’t compile the new file.

    • Jeremy Englert

      Hi @disqus_rZWi2xbUeI:disqus, thanks for checking out Joints! Gulp can feel a bit tricky at first, but once you wrap your head around it, it’s a real joy to use.

      You have a few options.

      If you want to create a completely separate CSS file, you can create a “custom.scss” in the assets/scss directory. Whenever this is compiled, it will create a new CSS file with just your styles from custom.scss.

      If you want the “custom.scss” to be apart of your existing stylesheet, you’ll need to create a “_custom.scss” (the underscore tells this file to not compile on its own) file and then import it into your main.scss file. Whenever this is compiled, your _custom.scss file styles will be merged with all of your other styles.

      You can see how other styles are imported here: https://github.com/JeremyEnglert/JointsWP/blob/master/assets/scss/style.scss

      • Bruce McKenzie

        Yes. That worked. Like Compass, only easier 🙂

  • Robbie Andrew

    Hey Jeremy,

    Love your work. Having an odd issue that you might be able to help me with. Gulp Watch compilation time has lagged significantly in my most recent Joints Project. Previous projects would compile in the 10’s or 100’s of milliseconds range, whereas now I’m having compile times for simple changes of between 5 – 10 seconds? Any thoughts as to this change in behaviour? Hoping maybe its a simple oversight on my end somewhere.

    Thanks for your time.

    • Jeremy Englert

      Opened this up as an issue so I can look into it: https://github.com/JeremyEnglert/JointsWP/issues/176

      It appears it may be Foundation 6 related. In Foundation 6, each component must be included individually.

      • Robbie Andrew

        OK cheers, if it’s any help, my joints project running foundation 6.0.4 compiles fast as always, it seems for me at least to be limited to the new projects running 6.2

  • http://gabrielbajada.com Gabriel Bajada

    Hey Jeremy, I’m trying to get a new site going (to test that pesky interchange problem we were talking about last time), and now I’m getting errors while getting Gulp installed. Could you have a look at the screenshot please?

    Thanks,

    Gabriel

    • Jeremy Englert

      Try running this: rm -R node_modules && npm cache clean

      Then running npm install.

      The newest version introduces a few new gulp plugins, i think that’s causing the issue.

      PS – Did you see the latest response to the Interchange issues on GitHub?

  • asgonzales

    Hello.

    I am bit confused after I installed Gulp Install what will I do

    • Jeremy Englert

      Check out the different commands listed under the setup instructions. Those should get you going in the right direction.

  • Andrew Sepic

    Hi Jeremy,
    I have gotten everything working with Gulp, but I couldn’t do so based on your instructions. To get it working I did the following.
    1. Installed Node.js
    2. Installed NPM using the npm install command
    3. Within my project directory (theme directory) I Installed gulp using the npm install gulp -g command
    4. Ran the gulp command and everything works.

    My question is why you didn’t advise folks to install gulp globally and then install it locally as a project dependency using the npm install –save-dev gulp command? Also I’m wondering if there’s a way to avoid having 8 mbs of files and folders within the node_modules folder within the themefiles. I find it just a bit sloppy and was wondering is installing gulp as a dependency would clean that up a bit?

    Thanks for all your work! Build tools are not easy getting into!

    • Jeremy Englert

      ‘npm install’ will install Gulp locally, along with all of the other dependancies. Users who have never used Gulp before will also have to install Gulp globally by running ‘npm install gulp -g’.

      The next version of JointsWP is going to streamline this a bit. Gulp will NOT be required globally – as we’ll rely on NPM scripts to run the commands. So instead of ‘gulp styles’, we’ll use ‘npm styles’. This is already in development if you want to check out the Github branch.

      • Andrew Sepic

        Thanks for the quick response! I didn’t understand NPM install installed gulp locally. Sounds like a great next step to streamline things. Thanks again for your work! I look forward to rolling out a some sites with JointsWP as the starting point.

        I also like to work with the .SASS syntax rather than SCSS so I tinkered with the gulp.js file and managed to get it watching for changes to both .sass and .scss files. I did notice a bit of a performance drop (3-4 secs rather than 30ms) but other than that it looks like I’m good.

  • Andytc

    Hi , I’ve been looking at JointsWP for a while now , I’ve been using an earlier version of Foundation and would love to move over to JointsWP … but , I’m new to SASS (read as clueless so far) and working on a windows (10) machine , so no CodeKit for me.

    Do i need gulp for the SASS version ?

    I use sublime for editing and was using a compiler called Prepos for SASS – https://prepros.io/ in conjunction with LiveReload.

    Keen to get started , can i use the SASS version with this setup ?

    Sorry if it’s a dumb question 🙂

    • Jeremy Englert

      Never a dumb question!

      Prepos should work fine with JointsWP. I know of atleast a few users who use that in their setup.

      Gulp isn’t required – it’s just the preferred workflow. 🙂

      • Andytc

        I don’t suppose there is info anywhere on what files/dir i should be compiling ?
        Complete newb at SASS , so wondering what files i edit and what files i should tell prepos to complie and where to spit it out ? 🙂

        Is there anyone using windows with prepos that could tell me how to set it up ?

        • Jeremy Englert

          Let me know if this helps: http://jointswp.com/docs/file-structure/

          • Andytc

            Cheers ! it’s working 🙂

            one thing … bit stumped and making me feel something is wrong ,whilst playing with the styles i couldn’t affect the style for the comment date ‘time’ as below –

            April 25th, 2016 – 8:10pm

            i can find it in the _main.scss but if i edit that nothing changes , seems to be under .vcard but don’t see that class on the frontend.?

            where is my massive error ? ID10T perhaps ? 🙂

  • Lee

    I thought I would give Joints a try on my dev environment however I appear to be having a problem I followed the instructions above but when I ran gulp I got the error shown in the attachment , I’ve managed to narrow it down to the `gulp foundation-js` command but after that I can’t find what the cause is or how to get around it to continue with the installation.

    Any help would be greatly appreciated.

    • Jeremy Englert

      Is there a .babelrc file in your vendor/foundation-sites directory?

      • JF Godin

        I’m running into the same problem and I do have a .babelrc file the contents of which are:

        {

        “plugins”: [

        “transform-es2015-arrow-functions”,

        “transform-es2015-block-scoped-functions”,

        “transform-es2015-block-scoping”,

        “transform-es2015-classes”,

        “transform-es2015-destructuring”,

        “transform-es2015-template-literals”,

        “transform-es2015-parameters”,

        “transform-es2015-shorthand-properties”,

        “transform-es2015-spread”,

        ]

        }

        New to using Gulp :O Thanks for any insight you are able to provide.

        • Case

          I was getting this error as well. This fix worked for me:

          https://github.com/zurb/foundation-sites/issues/8256#issuecomment-190037377

          1. Open the packages.json file

          2. Replace:

          “babel-preset-es2015”: “^6.5.0”,

          with:

          “babel-plugin-transform-es2015-modules-commonjs”: “^6.3.13”,

          “babel-plugin-transform-es2015-arrow-functions”: “^6.3.13”,

          “babel-plugin-transform-es2015-block-scoped-functions”: “^6.3.13”,

          “babel-plugin-transform-es2015-block-scoping”: “^6.4.0”,

          “babel-plugin-transform-es2015-classes”: “^6.3.15”,

          “babel-plugin-transform-es2015-destructuring”: “^6.3.15”,

          “babel-plugin-transform-es2015-parameters”: “^6.3.26”,

          “babel-plugin-transform-es2015-shorthand-properties”: “^6.5.0”,

          “babel-plugin-transform-es2015-spread”: “^6.4.0”,

          “babel-plugin-transform-es2015-template-literals”: “^6.3.13”,

          “babel-register”: “^6.5.2”,

          3. Run ‘npm install’

          4. Run ‘gulp’

          This worked for me anyway. Hope that helps!

          • blueocto

            Thanks for sharing, this has worked for me

  • Justin Ramers

    Nice work on this. Are we meant to upload all files from from node_modules directory, etc. to our production WordPress server and do we need Node running on that server? I got the install working fine on my local but I’m a little confused how to deploy to production. Thanks!

    • Case

      I’m a bit confused by this as well. I’ve been uploading the whole theme folder but there are loads of files in there I’m sure aren’t required for the theme to run. It does seem to require some of them though. @jeremyenglert:disqus can we get any confirmation on which files we need to upload to our sites? Many thanks.

    • peasantwizard

      Hey guys! node_modules is for local development only.

      Personally I deploy with Duplicator and just ignore the node_modules folder when building my packages. If I need to pull a local copy, which won’t have node_modules, it can be reinstalled with npm_update (installs the devDependencies in package.json)

      • Andrew

        How do you ignore the node modules folder?

        • Andrew

          Set up a git ignore file and paste in “node_modules”

  • peasantwizard

    This may not be the right place to make this comment, but if your on Windows and Gulp wont run from CMD: ‘npm install -g gulp-cli’

  • http://blog.kenmau.com Ken Mau

    Hi Jeremy,
    Am currently working on a workflow for wordpress themes with gulp. I’m using wpjoints and was wondering how I can use browserSync with MAMP? I think I have to add some proxy to the browserSyn.init but seeing if you know anything. Thank you!

    • david carter

      Sure you may have sorted this now, but in your gulpfile.js file, in the the browserSync section, just replace the URL with the one you are using in MAMP e.g. if you have a virtualHost in MAMP pointing at blah.com, use that.

  • Snaphaan

    Hi Jeremy. I have been struggling a couple of days now trying to get this theme to run. Did a reinstall of windows 7 (lenovo laptop), and everything else but so far no luck.

    Install node.js
    download framework and…
    run npm watch

    I get these errors:
    npm WARN depredated graceful-fs@3.0.8: graceful-fs v3.0.0 and before will fail on node release > = v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use ‘npm ls graceful-fs’ to find it in the tree
    npm WARN optional dep failed, continueing fsevents@1.0.12
    npm WARN deprecated lodash@1.0.2: lodash@= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use ‘npm ls graceful-fs’ to find it in the tree.
    npm WARN deprecated cross-spawn-async@2.2.4: cross-spawn no longer required a build toolchain, use it instead!oing on?

    Any idea what this is?

    • peasantwizard

      Hey Snaphaan! I’ve been using ‘npm update’ successfully.

  • Shannon Schärer

    I feel really stupid but when I am uploading the theme, which files do I need to include? For example I’m guessing that I don’t necessarily need to upload scss everything has been written into a css file. What about node_modules? This file is huge and I’d really like to spare myself the heartache of waiting for that to upload if I can.

    • http://www.thomasjones.de Thomas Jones

      You don’t need the node_modules on your server. It’s only needed for development.

  • Pierre Smith

    hey I’ve been trying to figure out how to get browsersync to work with your theme. every time I run the task it never loads the page.

    • Pierre Smith

      turns out i just had to add //<![CDATA[
      document.write("”.replace(“HOST”, location.hostname));
      //]]>