Paths of the generated pages with assemble

Question

I am struggling with the grunt-assemble grunt task configuration which looks like this:

assemble: {
  options: {
    flatten: false,
    expand: true,

    assets: '',

    layout: 'default.hbs',
    layoutdir: 'templates/layouts',

    partials: ['templates/includes/*.hbs'],
    helpers: ['templates/helpers/*.js'],
    data: ['templates/data/*.{json,yml}']
  },

  dev: {
    src: 'templates/pages/**/*.hbs',
    dest: 'build/'
  }

The scaffolding of the project templates for assemble.io looks like:

templates
├── helpers
├── includes
│   ├── page-footer.hbs
│   ├── page-header.hbs
│   └── scripts.hbs
├── layouts
│   └── default.hbs
└── pages
    ├── en
    │   └── index.hbs
    ├── fr
    │   └── index.hbs
    └── index.hbs

My wish is go get something like:

build
├── en
│   └── index.html
├── fr
│   └── index.html
└── index.html

But instead I get something like:

build
└── templates
    └── pages
        ├── en
        │   └── index.html
        ├── fr
        │   └── index.html
        └── index.html

I did try a few (a lot actually) of combinations (with the flatten and expand as well as the cwd options) but I am stuck.

Using flatten has for consequence to make the index.html files to overwrite each others.

So I actually do the rendering into a .tmp directory and then move the files to the build directory. I do not like that solution because then, the page.assets is still broken (its value would be ../../.., for the root index.html).

Lenssen

Answer 1

grunt-assemble

(Note that this information refers specifically to grunt-assemble 0.4.x, which is the grunt plugin for assemble but has a completely different API)

@doowb almost has it right, try adding expand: true and ext: '.html' to the files config:

assemble: {
  options: {
    flatten: false,
    expand: true,

    assets: '',

    layout: 'default.hbs',
    layoutdir: 'templates/layouts',

    partials: ['templates/includes/*.hbs'],
    helpers: ['templates/helpers/*.js'],
    data: ['templates/data/*.{json,yml}']
  },

  dev: {
    files: [
      {expand: true, cwd: 'templates/pages/', src: '**/*.hbs', dest: 'build/', ext: '.html'}
    ]
  }
}

Also take a look at https://github.com/assemble/assemble-contrib-permalinks

assemble 0.7.x

Collections are first-class in assemble 0.7.0, as are plugins, so things like generating relative links, building pagination, and creating custom permalinks are much easier to do.

If you're using assemble 0.7.x and up, assemble-permalinks is the plugin you'd want to use.

Duotone

Thank you very much! I was looking at the right place, but it gets a bit confusing with the files object or other possible syntax. – Lenssen

How would this be done using node assemble @Duotone @doowb? Would it be something like... app.pages([path to pages], { [file config]} or is this just a grunt thing atm? – Trying

Answer 2

Did you try using the expanded files object for grunt targets with the cwd property?

assemble: {
  options: {
    flatten: false,
    expand: true,

    assets: '',

    layout: 'default.hbs',
    layoutdir: 'templates/layouts',

    partials: ['templates/includes/*.hbs'],
    helpers: ['templates/helpers/*.js'],
    data: ['templates/data/*.{json,yml}']
  },

  dev: {
    files: [
      { cwd: 'templates/pages/', src: '**/*.hbs', dest: 'build/' }
    ]
  }
}

Carder

I actually did. got errors about files not found, looking like that Error: Unable to read "index.hbs" file (Error code: ENOENT). at Object.util.error (..../node_modules/grunt/lib/grunt/util.js:57:39) at Object.file.read (..../node_modules/grunt/lib/grunt/file.js:237:22) at buildPage (..../node_modules/assemble/tasks/assemble.js:289:78) at ..../node_modules/assemble/tasks/assemble.js:345:23 – Lenssen