Menu icon Foundation
Adding new Gulp tasks to Panini

I'd like to add some custom gulp tasks to Foundation Panini so after I have built for production I can generate a sitemap and deploy to static site host.

Looking  at the gulpfile.babel.js all the gulp commands look ok so I tried adding the following as a test

//Build Sitemap
gulp.task('sitemap', () => {
	//sitemap
	console.log('Build Sitemap');
});

Then when I try running "gulp sitemap" I get an error saying it can't run the command.

Is the gulp commands overridden by "Foundation" commands and is it possible to customise these files?

paninigulpproblem

I'd like to add some custom gulp tasks to Foundation Panini so after I have built for production I can generate a sitemap and deploy to static site host.

Looking  at the gulpfile.babel.js all the gulp commands look ok so I tried adding the following as a test

//Build Sitemap
gulp.task('sitemap', () => {
	//sitemap
	console.log('Build Sitemap');
});

Then when I try running "gulp sitemap" I get an error saying it can't run the command.

Is the gulp commands overridden by "Foundation" commands and is it possible to customise these files?

Rafi Benkual over 2 years ago

Hi Andrew,

You can add any Gulp task you'd like to the Gulpfile - it's fully customizable.

I think that you made need a gulp plugin to build a sitemap, not sure which one you're using. This one I founda might help you https://www.npmjs.com/package/gulp-sitemap

Andrew Cetnarskyj over 2 years ago

Thanks for the reply Rafi I will try that.

 

Andrew Cetnarskyj over 2 years ago

Update : found a lot of answers in this tech talk from one of your engineers

 

https://youtu.be/MPOMZ8Qs_HA

Dustin Harrell over 1 year ago

Hi Andrew,

I'm not sure if you were able to successfully create your sitemap task.  I have implemented this feature on my company website.  Below is an example from my gulp-sitemap function.

  1. Install gulp-sitemap (npm install --save-dev gulp-sitemap)
  2. Copy the function below to your gulpfile (assuming you are using the latest version of ZURB Stack - I'm running 6.4.1)
  3. Add a call to sitemap in your build task, and modify the siteUrl variable accordingly. 

Note: This implementation also removes trailing slashes from the sitemap via the mappings array.

gulpfile.bable.js

// Generate a sitemap from generated html files.
function sitemap() {
  return gulp.src(PATHS.dist + '/**/*.html')
    .pipe($.sitemap({
      siteUrl: 'http://example.com',
      mappings: [{
        pages: ['**/*'],
        getLoc(siteUrl, loc, entry) {
          // Removes the trailing slash if it exists
          return loc.replace(/\/$/, '');
        }
      }]
    }))
    .pipe(gulp.dest(PATHS.dist));
}