Foundation-sites: Zurb Template - Panini Gulp watch task gets stuck after first page reset & reload.

[joeyred]

I've had this issue for a while with using the Zurb template and panini. It actually caused me to, for a while, simply bring in foundation via bower and write the gulpfile.js myself. However, for a recent project I decided to come back and try the Zurb template again since the 6.2 release of Foundation for Sites.

The one thing I am at least happy to say, is while as frustrating as the situation was, I at least this time saw roughly where things quit on me in the task runner.

How can we reproduce this bug?

1. Manually download the zurb template from its git repository as per documentation.
2. After running install commands for bower and npm, run gulp's default task. (using both 'gulp' and 'npm start` gave me the same results.)
3. Add a file to the partials, or make any kind of change to the html files that will trigger gulp's watch task to run both panini tasks and the browser reload.
4. After seeing the changes reflected, try to do so again.

What did you expect to happen?

The browser to reload and the pages to be refreshed to reflect my changes. (manually refreshing does nothing either. The panini related tasks will not run again.)

What happened instead?

Basically, everything will start up fine with either running gulp or npm start. All other tasks seem to work fine as well. Once I try and save a html file however, I will never see any changes after that point. What I found was that after the reset and pages task ran from the watch task, I would see this in the terminal after those tasks finished:

Starting '<anonymous>' ...

I didn't really have enough time to figure out exactly why this happened, but gulp will get stuck in an anonymous function with no way out, so the task never finishes. It doesnt crash, but it will just never update my pages again until i quit and start it again.

I eventually gave up on it as a bad job and decided to attempt to use panini on my own. I wrote a similar string of tasks, though i used the sequence plugin instead of the new gulp function in 4.0. I also wrote the watch task differently. The code isnt as smart as what's in the template, but things do now work correctly and as i would expect.

My Panini related tasks:

/*
 * PANINI
 */
gulp.task('pages', function() {
  gulp.src('src/pages/**/*.html')
    .pipe(panini({
      root:     'src/pages/',
      layouts:  'src/layouts/',
      partials: 'src/partials/',
      helpers:  'src/helpers/',
      data:     'src/data/'
    }))
    .pipe(gulp.dest('dist'));
});
gulp.task('resetPanini', function(){
  panini.refresh();
});
gulp.task('reloadPages', function(cb) {
  sequence(
    'resetPanini',
    'pages',
    cb
  )
});

/* Watch Task */
gulp.task('watch', ['browserSync'], function() {
  gulp.watch('src/scss/**/*.scss', ['compileSass']);
  gulp.watch('assets/js/**/*.js', ['concatScripts']).on('change', browserSync.reload);
  // The Watch Task for Panini
  gulp.watch(['src/data/**/*', 'src/helpers/**/*', 'src/layouts/**/*', 'src/pages/**/*', 'src/partials/**/*'], ['reloadPages']).on('change', browserSync.reload);
});

While I don't think the other two gulp.watch functions matter at all to this issue, I included them anyway just in case.

Please also note that I tried to use the syntax suggested in the Panini readme on its repository page, but it didn't work, so I did it in this fashion simply just make it work.

[simonlacey]

i have the same issues you do, i copy and pasted your code, I still can't get paste the first reload unfortunately. wonder why.

[JRetza]

What happens if you change browserSync.reload to just browser.reload?

[zacharywenner]

I'm having this same problem too. I downloaded Foundation 6 and it will reload my changes only once after npm start. In order to see changes, I have to exit out and npm start again.

[JRetza]

For those browserSync reload fails
take a look at what we did here with the default gulpfile.babel.js https://github.com/zurb/foundation-sites/issues/8703

view the PR:
https://github.com/zurb/foundation-zurb-template/pull/36/files

[joeyred]

The code I included is from a my own gulpfile. I use browserSync instead of browser as my variable. More out of habit than anything else. What I wrote was for the use of Panini on it's own and not for the Zurb template, however I thought that both important to show that there is a way to make it work, and that the code i provided could maybe help someone who knows the Zurb template's gulpfile better than I do.

As for the pull request, I think the .on('change') addition could do the trick, though I don't have the time to check on that myself just now. I honestly am a bit confused as to how this has gone on for so long if this is supposedly the template Zurb themselves use for projects?

[simonlacey]

fndally thank you so much!!! worked for me.

[brightonmike]

https://github.com/zurb/foundation-sites/issues/8736#issuecomment-217081046

It works, I'd highly recommend you try it as I had the exact same issue as you and this fixed it for me.

[kball]

Given the PR above has been merged, closing this issue.