Menu icon Foundation
Including directories and files in Dist

Hello everyone,

I am still very new to Foundation but have almost completed my first site.  I was wondering how to include a directory with files in the dist folder.

Basically, I want to include the CouchCMS folder in my dist.  I figured out that if I add it to the src/pages folder it adds the directory structure to the dist folder, but it doesn't actually include all of the files.  If I add it to the assets path in config.yml it puts it in the dist/assets folder.  I need the entire directory structure to be put into the root of the dist folder.

Anyone have any suggestions?

Thank you,

Greg

dist builddirectory structure

Hello everyone,

I am still very new to Foundation but have almost completed my first site.  I was wondering how to include a directory with files in the dist folder.

Basically, I want to include the CouchCMS folder in my dist.  I figured out that if I add it to the src/pages folder it adds the directory structure to the dist folder, but it doesn't actually include all of the files.  If I add it to the assets path in config.yml it puts it in the dist/assets folder.  I need the entire directory structure to be put into the root of the dist folder.

Anyone have any suggestions?

Thank you,

Greg

Michal Pandyra over 2 years ago

Hi Greg,

You'll have to make a few modifications to the functions in your Gulp task runner to accomplish this. Based on your other thread I'll continue to assume you're using the Foundation Zurb Template. You'll be editing the gulp.babel.js file. I'm also assuming that your CouchCMS files live in "/src/couch"

We'll be creating a new task. To keep things simple it'll be based on the pre-existing "copy" task with some slight modifications. However, rather than declaring the settings variables in config.yaml we'll just be hard-coding the values to save time.

Find the existing copy task. It's around line 46 and looks like this:

function copy() {
  return gulp.src(PATHS.assets)
    .pipe(gulp.dest(PATHS.dist + '/assets'));
}

Now directly beneath it create our new task.

function cms() {
  return gulp.src('src/couch/**/*')
    .pipe(gulp.dest(PATHS.dist + '/couch'));
}

That creates a task that grabs and files and folders under your "src/couch" directory and copies them to your "/dist/couch" directory. If your files wants to live at a different sub-folder you'll make the change here.

Then you have to notify the task runner to run the task. There are two tasks that need to be updates. The "build" task which runs when you run npm and the "watch" task that monitors directories for changes (this one is optional...).

For the "build" task on Line 31, change:

gulp.series(clean, gulp.parallel(pages, sass, javascript, images, copy), styleGuide));

You have to add the name of your newly created task to the list:

gulp.series(clean, gulp.parallel(pages, sass, javascript, images, copy, cms), styleGuide));

 

Optionally, for the "watch" task at the bottom find:

gulp.watch(PATHS.assets, copy);

Below on a new line add a new watcher:

gulp.watch('src/couch/**/*', cms);

 

Basically, what this does is monitors the "/src/couch/" directory for changes. If you make changes to files in that folder it will re-copy them to the "/dist/" folder by running the "cms" task.

 

Greg Brown over 2 years ago

Michal,

Once again, you are very helpful!  That worked perfectly.  Also, because of your great help and explanations, I was able to figure out how to make Gulp copy my .php files in src/pages over to the dist folder as well.  I just added php to the code below in the gulpfile.

 

Thanks again!!!

// Copy page templates into finished HTML files
function pages() {
  return gulp.src('src/pages/**/*.{html,hbs,handlebars,php}')
    .pipe(panini({
      root: 'src/pages/',
      layouts: 'src/layouts/',
      partials: 'src/partials/',
      data: 'src/data/',
      helpers: 'src/helpers/'
    }))
    .pipe(gulp.dest(PATHS.dist));
}