Paths of the generated pages with assemble

2.1k Views Asked by At

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).

2

There are 2 best solutions below

2
On BEST ANSWER

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.

1
On

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/' }
    ]
  }
}