Skip to content

Instantly share code, notes, and snippets.

@doowb
Created May 24, 2014 01:11
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save doowb/ca6f3321a05f6ac727e5 to your computer and use it in GitHub Desktop.
Save doowb/ca6f3321a05f6ac727e5 to your computer and use it in GitHub Desktop.
Loading page data from json files and dynamically building page objects to pass into Assemble options.
'use strict';
var _ = require('lodash');
var path = require('path');
module.exports = function(grunt) {
// load the recipe template from the desired path
var recipeTemplate = grunt.file.read('./src/templates/pages/recipe.hbs');
// expand the data files and loop over each filepath
var pages = _.flatten(_.map(grunt.file.expand('./src/data/recipe*.json'), function(filepath) {
// read in the data file
var data = grunt.file.readJSON(filepath);
// create a 'page' object to add to the 'pages' collection
return {
// the filename will determine how the page is named later
filename: path.basename(filepath, path.extname(filepath)),
// the data from the json file
data: data,
// add the recipe template as the page content
content: recipeTemplate
};
}));
// Project configuration.
grunt.initConfig({
config: {
src: 'src',
dist: 'dist'
},
assemble: {
pages: {
options: {
flatten: true,
assets: '<%= config.dist %>/assets',
layout: '<%= config.src %>/templates/layouts/default.hbs',
data: '<%= config.src %>/data/*.{json,yml}',
partials: '<%= config.src %>/templates/partials/*.hbs',
// add the pages array from above to the pages collection on the assemble options
pages: pages
},
files: [
// currently we need to trick grunt and assemble into putting the pages file into the correct
// place using this pattern
{ dest: './dist/', src: '!*' }
]
}
}
});
grunt.loadNpmTasks('assemble');
grunt.registerTask('default', [
'assemble'
]);
};
@tommarshall
Copy link

Is there a gulpfile.js version of this dynamic build task posted anywhere?

I've got as far as:

gulp.task('content', function () {

  // // load the recipe template from the desired path
  var recipeTemplate = fs.readFileSync('./src/content/pages/post.hbs');

  // expand the data files and loop over each filepath
  var pages = _.flatten(_.map(glob.sync('./src/content/data/posts/*.json'), function(filepath) {

    // read in the data file
    var data = JSON.parse(fs.readFileSync(filepath));

    // create a 'page' object to add to the 'pages' collection
    return {
      // the filename will determine how the page is named later
      filename: path.basename(filepath, path.extname(filepath)),
      // the data from the json file
      data: data,
      // add the recipe template as the page content
      content: recipeTemplate
    };
  }));

  // setup items on the assemble object
  assemble.data({site: {title: 'Sanofi Inspires Prototype'}});
  assemble.data(['src/content/data/*.{json,yml}']);
  assemble.layouts(['src/content/layouts/*.hbs']);
  assemble.partials(['src/content/partials/*.hbs']);
  assemble.pages(pages);

  gulp.src(['src/content/pages/*.hbs'])
    .pipe(gulpAssemble(assemble, { layout: 'default' }))
    .pipe(extname())
    .pipe(gulp.dest('dist'))
    // notify browserSync to refresh
    .pipe(browserSync.reload({stream: true}))
    // catch errors
    .on('error', gutil.log);
});

But it's just building out the first post to dist/undefined.. Ideally I'd like the posts to go to dist/posts/A.html, dist/posts/B.html, etc., while the main pages go to dist/index.html, dist/contact.html, etc.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment