Assemble.io issue with using alternative templates getting 0 pages assembled

Question

I am new to Assemble.io and I am using a generator to quickly set up for Foundation 5. However, I am having an issue getting it using alternative templates.

I am able to get the page to generate all pages with the same template but would prefer to obviously have different templates for sections of the site.

Current Gruntfile.js

assemble : {
 options : {
  layoutdir : '<%= paths.templates %>/layouts',
  layout : 'site.hbs',
  partials : '<%= paths.templates %>/partials/*.hbs',
  assets : '<%= paths.assets %>',
  data : '<%= paths.data %>/*.{json,yml}',
  helpers : [ '<%= paths.templates %>/helpers/*.js' ],
  marked : {gfm : true},
  plugins : [ 'assemble-middleware-sitemap','assemble-contrib-permalinks' ],
  sitemap : {dest : '<%= paths.dist %>/'},
  permalinks : {preset : 'pretty'},
 },
 about: {
  // override task-level layout
  options: {
   layoutdir : '<%= paths.templates %>/layouts',
   layout: 'banded.hbs',
   partials : '<%= paths.templates %>/partials/*.hbs',
   assets : '<%= paths.assets %>',
   data : '<%= paths.data %>/*.{json,yml}',
   helpers : [ '<%= paths.templates %>/helpers/*.js' ],
   marked : {gfm : true},
   plugins : [ 'assemble-middleware-sitemap','assemble-contrib-permalinks' ],
   sitemap : {dest : '<%= paths.dist %>/'},
   permalinks : {preset : 'pretty'}
  },
  // files: {'docs/': ['src/content/about/*.hbs' ]},
  files : [ {
   expand : true,
   cwd : '<%= paths.content %>/about',
   src : '<%= paths.content %>/about/*.{md,hbs}',
   dest : '<%= paths.dist %>/'
  } ]
 },
 
 // Default
 dist : {
  files : [ {
   expand : true,
   cwd : '<%= paths.content %>/',
   src : '**/*.{md,hbs}',
   dest : '<%= paths.dist %>/'
   } ]
  }
 },

As I am very new to this I have tried several things and looked at the documentation on the Assemble.io site but it does not seem to help here.

Example from Assemble.io site.

assemble: {
  options: {
    layout: 'default.hbs',
    layoutdir: 'layouts' 
  },
  docs: {
    // override task-level layout 
    options: {layout: 'docs-layout.hbs' },
    files: {'docs/': ['src/docs/*.hbs' ]},
  },
  site: {
    // override task-level layout 
    options: {layout: 'site-layout.hbs' },
    files: {'site/': ['src/site/*.hbs' ]},
  }
  // ... other targets 
}

So as I mentioned prior the core Foundation site was being generated by Yoeman and I am using generator-sassy-roboyeti so I did not want to stray to far from what it is setting up by default.

Any ideas would be greatly appreciated.

Answer 1

This is not exactly the answer but I did find an alternative method.

Instead of telling each section to use layouts I am just adding which layout the file should use for each single HTML file. I think this is far easier.

Updated Gruntfile.js

'use strict';
module.exports = function(grunt) {
 require('time-grunt')(grunt);

 grunt
 .initConfig({

  paths : {
   src : 'src',
   dist : 'dist',
   tmp : '.tmp',
   assets : '<%= paths.dist %>/assets',
   content : '<%= paths.src %>/content',
   data : '<%= paths.src %>/data',
   templates : '<%= paths.src %>/templates',
   bower : 'bower_components'
  },

  //credentials: grunt.file.readJSON('credentials.json'),

  watch : {
   assemble : {
    files : [ '<%= paths.src %>/{content,data,templates}/**/*.{md,hbs,yml,json}' ],
    tasks : [ 'assemble' ]
   },
   sass : {
    files : [ '<%= paths.src %>/css/**/*.scss' ],
    tasks : [ 'sass:server' ]
   },
   js : {
    files : [ '<%= paths.src %>/js/**/*.js' ],
    tasks : [ 'concurrent:js' ]
   },
   livereload : {
    options : {
     livereload : '<%= connect.options.livereload %>'
    },
    files : [ '<%= paths.dist %>/**/*.html',
      '<%= paths.assets %>/css/{,*/}*.css',
      '<%= paths.assets %>/js/{,*/}*.js',
      '<%= paths.assets %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' ]
   }
  },

  connect : {
   options : {
    port : 9000,
    livereload : 35729,
    // change this to '0.0.0.0' to access the server from outside
    hostname : 'localhost'
   },
   dist : {
    options : {
     open : true,
     base : [ '<%= paths.dist %>' ]
    }
   }
  },

  assemble : {
   options : {
    layoutdir : '<%= paths.templates %>/layouts',
    //layout : 'site.hbs',
    partials : '<%= paths.templates %>/partials/*.hbs',
    assets : '<%= paths.assets %>',
    data : '<%= paths.data %>/*.{json,yml}',
    helpers : [ '<%= paths.templates %>/helpers/*.js' ],
    marked : {gfm : true},
    plugins : [ 'assemble-middleware-sitemap','assemble-contrib-permalinks' ],
    sitemap : {dest : '<%= paths.dist %>/'},
    permalinks : {preset : 'pretty'},
   },
   //Default
   dist : {
    files : [ {
     expand : true,
     cwd : '<%= paths.content %>/',
     src : '**/*.{md,hbs}',
     dest : '<%= paths.dist %>/'
    } ]
   }
  },

  imagemin : {
   images : {
    files : [ {
     expand : true,
     cwd : '<%= paths.content %>/images/',
     src : '**/*.{png,jpg,gif}',
     dest : '<%= paths.assets %>/images/'
    } ]
   }
  },

  modernizr : {
   dist : {
    devFile : '<%= paths.bower %>/modernizr/modernizr.js',
    outputFile : '<%= paths.assets %>/js/modernizr.js'
   }
  },

  sass : {
   options : {
    includePaths : [ '<%= paths.bower %>' ]
   },
   dist : {
    options : {
     outputStyle : 'compressed'
    },
    files : {
     '<%= paths.assets %>/css/site.css' : '<%= paths.src %>/css/site.scss'
    }
   },
   server : {
    options : {
     sourceMap : true
    },
    files : {
     '<%= paths.assets %>/css/site.css' : '<%= paths.src %>/css/site.scss'
    }
   }
  },

  concurrent : {
   js : [ 'copy:bower', 'copy:js', 'modernizr' ],
   assets : [ 'copy:bower', 'copy:js', 'modernizr', 'imagemin' ]
  },

  clean : {
   dist : '<%= paths.dist %>/**',
   tmp : '<%= paths.tmp %>',
   bowerAssets : '<%= paths.dist %>/bower_components',
   js : [ '<%= paths.assets %>/js/*',
     '!<%= paths.assets %>/js/modernizr.js' ]
  },

  useminPrepare : {
   home : '<%= paths.dist %>/index.html',
   options : {
    dest : '<%= paths.dist %>'
   }
  },

  filerev : {
   css : {
    src : '<%= paths.assets %>/css/*.css'
   },
   js : {
    src : '<%= paths.assets %>/js/*.js'
   }
  },

  usemin : {
   html : [ '<%= paths.dist %>/**/*.html' ]
  },

  copy : {
   bower : {
    files : [ {
     expand : true,
     cwd : '<%= paths.bower %>/',
     src : [ 'jquery/**', 'foundation/**' ],
     dest : '<%= paths.dist %>/bower_components/'
    } ]
   },
   js : {
    files : [ {
     expand : true,
     cwd : '<%= paths.src %>/js/',
     src : [ '*.js' ],
     dest : '<%= paths.assets %>/js/'
    } ]
   }
  },

  cdnify : {
   dist : {
    html : [ '<%= paths.dist %>/**/*.html' ]
   }
  },

  htmlmin : {
   dist : {
    options : {
     removeComments : true,
     collapseWhitespace : true
    },
    files : [ {
     expand : true,
     cwd : '<%= paths.dist %>/',
     src : '**/*.html',
     dest : '<%= paths.dist %>'
    } ]
   }
  }
 });

 grunt.loadNpmTasks('assemble');
 require('load-grunt-tasks')(grunt);

 grunt.registerTask('build:dist', [ 'clean:dist', 'clean:tmp', 'assemble',
   'concurrent:assets', 'sass:dist', 'useminPrepare', 'concat',
   'clean:js', 'uglify', 'filerev', 'usemin', 'cdnify', 'htmlmin',
   'clean:bowerAssets' ]);

 grunt.registerTask('build:server', [ 'clean:dist', 'clean:tmp', 'assemble',
   'concurrent:assets', 'sass:server' ]);

 grunt.registerTask('server', [ 'build:server', 'connect', 'watch' ]);

 grunt.registerTask('default', [ 'build:dist' ]);
};

Now in my /about/index.hbs

---

title: About description: This is my about page.

layout: banded.hbs

Hi, this is the about page.