Menu icon Foundation
Foundation Watch Fails (Windows)

Hello Everyone,

I've heard good things about Foundation and thought I'd give it a go. Unfortunately, I seemed to have fallen at the first hurdle.

I'm on Windows 10. I've installed node, git and foundation-cli successfully.

I've run 'foundation new', created a foundation-sites instance based on the zurb template, which all seems to have been successful.

 

However, when I switch to the new folder and run 'foundation watch' I get some errors. The process then fails and foundation does not work it's magic.

 

 

I've had a look around the forums, stack exchange and the internet in general. I cannot find anything that points me in the right direction.

As far as I can work out I have installed everything correctly. Gulp appears to be installed correctly. I have run 'npm install' and 'bower install' to double check dependancies. Still no joy.

If it is of use, I can post screenshots showing what happens when I run 'npm start' and 'gulp'. There are additional error messages.

 

Any help or suggestions would be greatly appreciated!

 

gggg

Foundationwatchcliwindowserrorsgulp

Hello Everyone,

I've heard good things about Foundation and thought I'd give it a go. Unfortunately, I seemed to have fallen at the first hurdle.

I'm on Windows 10. I've installed node, git and foundation-cli successfully.

I've run 'foundation new', created a foundation-sites instance based on the zurb template, which all seems to have been successful.

 

However, when I switch to the new folder and run 'foundation watch' I get some errors. The process then fails and foundation does not work it's magic.

 

 

I've had a look around the forums, stack exchange and the internet in general. I cannot find anything that points me in the right direction.

As far as I can work out I have installed everything correctly. Gulp appears to be installed correctly. I have run 'npm install' and 'bower install' to double check dependancies. Still no joy.

If it is of use, I can post screenshots showing what happens when I run 'npm start' and 'gulp'. There are additional error messages.

 

Any help or suggestions would be greatly appreciated!

 

gggg
Alex Lee over 3 years ago

I am on Windows 10 and running into the exact same problem as well.

Will over 3 years ago

Ah, at least I'm not on my own with this issue then!

 

I still can't work out what might be causing this, although I can't claim to be an expert on node, gulp etc.

I'm going to try a linux virtual machine, see if I can get this working...

Arkarys over 3 years ago

I tried it on Win 7 and 10. For me it is working so far.

As I can see on the second screenshot you start the magic with gulp - i get a simple command not found, if I try this.

I start the process with foundation watch (or build)

Do you have node and npm updated?

Will over 3 years ago

Hi Arkarys,

Thanks for replying.

In hindsight, the second screenshot is slightly misleading. I couldn't fit the whole output into the screenshot, so that second image shows the output after 'foundation watch' is run.

As I understand it, 'foundation watch' effectively runs 'npm start', which in turn runs 'gulp'.

Here is the output from running 'npm start':

npm start

And the output from running 'gulp':

gulp

 

I am running fresh installs of the latest versions of both node (5.10.1) and npm (3.8.3).

 e

Alex Lee over 3 years ago

Contrary to what the installation guide states, the installation taking more than a minute, it took around 15 minutes for me. A lot of nested folders were created in the project as well. I had a hard time removing them as Windows kept complaining that the filename is too long. Could this be a sign that it was not installed properly? I followed the guide exactly.

Will over 3 years ago

I've seen a fair bit about node, npm and nested node_modules written around. As far as I can work out, this shouldn't be an issue.

 

I've run 'npm dedupe', no difference made. So I think we can probably rule out nested folders as a cause of this problem.

I've also run 'bower update', just to make sure.

 

I'm still making no headway with this problem.

Arkarys over 3 years ago

Maybe you should uninstall node and install the latest stable version again:
https://nodejs.org/dist/v5.10.1/node-v5.10.1-x64.msi

Bower is no longer needed for Founddation 6. It was essential for Foundation 5. 

'npm cache clean' can also help before 'npm install npm -g'

@Alex: Indeed node_modules in a mail project is 160MB and full of nested folders. Try Total Commander, it can deal with extra long file/path names.

Will over 3 years ago

@Arkarys, thanks for the suggestions.

I've reinstalled node and git (belt and braces). On uninstalling I made sure to wipe all traces from the computer.

I've updated npm, cleaned the cache. I've made sure gulp is the latest version, and installed globally.

Unfortunately, it has made no difference. I am in exactly the same position as I was before.

Arkarys over 3 years ago

Hm, Will, that's weird. Obviously it seems to be a problem with browser-sync

Did you had Foundation 5 installed on your system?

('If you already have the Foundation 5 CLI on your machine, you will only be able to access one of the commands, depending on how your command line environment is configured. If you want to remove the old CLI, run gem uninstall foundation. After testing this new CLI, if you want to go back to the old CLI, run npm uninstall foundation-cli --global.')

Try npm uninstall foundation-cli --global and then npm install --global foundation-cli

As described here https://github.com/zurb/foundation-cli all you need is Node and Git. Foundation-Cli brings all other things you need. Aside, I was wrong, bower is still in use in F6, but you don't have to deal with it seperately. Sorry.

Maybe you don't have installed the latest foundation-cli version on your system.

I found that they updated foundation-for-sites to 6.2.1. I updated my projects and it is still working.

Just to make sure: what is your standard browser? Mine is Firefox. And maybe you try another more simple directory where you place your project. Maybe not c:\users\..., e.g. c:\zf6test\

And to get rid of 'Failed to load external module babel-register' do 'npm install gulp-babel babel-preset-es2015 --save-dev'. It's not crucial, but afterwards the error message at the start is gone, too.

Will over 3 years ago

Ok, Still not working...

 

I've completely wiped node, npm, git, ruby from my system. Purged the registry of any values I could find relating to them. I have reinstalled the latest versions of node and git. I have updated to the latest version of npm.

As far as I can tell, this should be a completely fresh install completely free from any previous installations or dependancies.

@Arkarys, thanks for your continued suggestions. However, I have never had Foundation 5 on my system. Foundation 6 is my first foray into frameworks.

 

I have tried an alternative route, cloning from git and then running 'npm install' and 'bower install'. Starting the process with 'npm start'.

This gives exactly the same end result as using fodation-cli.

 

Working on the assumption that browser-sync might be the problem, I checked for Windows-Related browser-sync problems. Apparently, according to https://www.browsersync.io/docs/#installation, Windows users might wish to install the latest Visual Studio. I have also done this. No difference.

 

I have copied the verbose error log to pastebin. I'll be honest, I don't know enough to work out how to fix these errors.

 

As before, any suggestions, or indeed solutions, would be greatly appreciated!

 

 

Will over 3 years ago

Quick update,

I believe the problem is not with browser-sync, as the 'server' process in gulp starts and finishes without errors.

The process that errors is 'watch', and by extension 'default' does not finish.

Arkarys over 3 years ago

O-oh. I surrender.

Do you know virtualbox? Maybe you install yourself a linux guest and try it there. I tried that successfully, too.

This was, how I found that I had a leading explamation mark in my directory name which made problems for me.

 

Will over 3 years ago

@Arkarys No worries mate, thanks for trying.

I've set up a quick linux installation on hyper-v, foundation is working flawlessly on there. It's not ideal for development though.

 

Oddly enough when I edit the gulpfile, removing server from the default task, the watch task appears to be running fine. So it would seem that browser-sync is to blame at this point.

 

 I'm going to repost this issue on the github

Colin Marshall over 3 years ago

@Will what happens when you change the default task to run `server` and `watch` in parallel?

// Build the site, run the server, and watch for file changes
gulp.task('default',
  gulp.series('build', gulp.parallel(server, watch)));

Matthew Wall over 3 years ago

I may have had this problem too, it looks really familiar, I had to run:

$npm install -g gulp

I believed that solved the problem, normally gulp should install with node.js but sometimes it fails I guess. Try that.

Will over 3 years ago

Matthew, thanks for suggesting that. Unfortunately I have already installed gulp globally and still have the same problem.

 

For reference, I have also started a github issue @ https://github.com/zurb/foundation-sites/issues/8573

Will over 3 years ago

I have solved this problem, for a certain definition of solved.

Basically, I gave in and perfored a Windows 10 refresh - fresh install of Windows with my files saved.

 

I have reinstalled node, git and foundation and now everything works like it should.

 

It seems that I had messed up something within my Windows installation that was having a knock-on effect.

 

Thanks to all who contributed to this thread with suggestions.