.verb.md

What is a scaffold? | gulp-scaffold-example

The following scaffold expands into a configuration object that can be passed to [gulp][], [grunt][], [assemble][], [metalsmith][], or even [yeoman][] for scaffolding out various parts of a blog or site (like adding a new post, UI component, etc):

var Scaffold = require('{%= name %}');
var scaffold = new Scaffold({
  posts: {
    src: 'templates/post.md',
    dest: 'blog/' 
  },
  components: {
    cwd: 'content',
    src: ['templates/*.hbs'],
    dest: 'blog/'
  }  
});

Example result

The above scaffold might expand into something like the following:

{
  options: {},
  blog: {
    options: {cwd: 'blog'},
    files: [
      {
        src: ['content/post.md', 'content/about.md'],
        dest: 'src/posts/'
      },
      {
        src: ['data/ipsum.json'],
        dest: 'src/data/'
      }
    ]
  },
  components: {
    options: {cwd: 'ui'},
    files: [
      {
        options: {cwd: 'templates/layouts'},
        src: ['default.hbs', '3-column.hbs'],
        dest: 'src/templates/layouts'
      },
      {
        options: {cwd: 'templates/components'},
        src: ['button.hbs', 'modal.hbs', 'navbar.hbs'],
        dest: 'src/templates/partials'
      },
      {
        src: ['scripts/button.js'],
        dest: 'src/assets/js/'
      },
      {
        src: ['data/ipsum.json'],
        dest: 'src/assets/data/'
      }
    ]
  }
}

Since we're just creating an object (with zero application logic), anything can obviously be extended, overridden, etc.

Install

{%= include("install-npm", {save: true}) %}

Usage

Create an instance of scaffold:

var Scaffold = require('{%= name %}');
var foo = new Scaffold({
  // config/options here  
});

Scaffold uses [expand-target][] and [expand-files][] as dependencies. Visit those projects for the full range of available features and options:

Examples

The following are just a few random examples of what a scaffold could be, but there are many more use cases.

Blog posts

Create a scaffold for adding blog posts to a project:

var blog = new Scaffold({
  post: {
    cwd: 'content',
    src: 'content/post.md', 
    dest: 'src/posts/'
  }
});

UI components

Create a scaffold for adding UI components to a project:

var components = new Scaffold({
  foo: {
    options: {cwd: 'scaffolds'},
    files: [
      {src: 'templates/component.hbs', dest: 'src/templates/'},
      {src: 'scripts/component.js', dest: 'src/scripts/'},
      {src: 'styles/component.css', dest: 'src/styles/'},
    ]
  }
});

API

{%= apidocs("index.js") %}

Comparison table

Many definitions exist for the terms "boilerplate", "scaffold" and "template". The following definitions describe these concepts as it relates to this project.

type	description
template	Resuable file, code or content which contains "placeholder" values that will eventually be replaced with real values by a rendering (template) engine
[scaffold](#{%= name %})	Consists of one or more templates or source files and serves as a "temporary support structure" that may be used to initialize a new project, or to provide ad-hoc "components" throughout the duration of a project.
boilerplate	Boilerplates consist of all of the necessary files required to initialize a complete project.

History

v0.3.0

• breaking change: targets are now stored on the targets object
• feature: now emits files when a files object is expanded.