Scaffold Options

The scaffold options object has the following keys:

• name (string): Will use name in package.json if omitted
• description (string): Will use description in package.json if omitted
• web (boolean): true if this is a Web Scaffold
• dependencies (object)
• devDependencies (object)
• pingyJson (object)
• files (array of objects: [{input, output, vars, includes}])

dependencies

Packages that are required by your scaffolded websites in production. The user will be prompted to install these files while scaffolding their website. Follows the same format as specified in a package.json file.

"dependencies": {
    "bootstrap": "^4.0.0-beta",
    "jquery": "^3.2.1",
    "popper.js": "^1.12.5"
}

devDependencies

Packages that are required by your scaffolded websites in development. The user will be prompted to install these files while scaffolding their website. Follows the same format as specified in a package.json file.

"devDependencies": {
    "node-sass": "^4.5.3"
},

⚠️   Notes
You need to add the modules to transform your source files as devDependencies. If you are using .pug files in your scaffold, you would need to add pug. In the above example, you would need to node-sass is added to transform sass files.
You should not include @pingy/cli in your devDependencies. Pingy CLI will automatically include this while scaffolding your site.

pingyJson

Properties in pingyJson will be used to extend the scaffolded pingy.json file. You may include the following properties:

• sourceMap (Boolean). Default: true. Should Pingy use Source Maps?
• minify (Boolean). Default: true. Should Pingy minify? (only applies to exported files)
• compile (Boolean). Default: true. Should Pingy compile/transpile files (e.g.. Sass, Babel, Pug, etc..)?
• exportDir (String). Default: dist. The relative folder that Pingy should export your site to.
• exclusions (Array of Objects). Default: []. Exclude files/folder from being exported or compiled. Read more here.
• port (number). Default: random available port. You should probably omit this property as the chosen port may not be available. It's usually best to let Pingy CLI choose an available port itself.

You do not need to include a property unless you wish to override the default. You do not need to include a name key as this is calculated based on the folder name that the site is being scaffolded into.

"pingyJson": {
  "sourceMap": false,
  "exclusions": [
    {
      "path": "node_modules",
      "action": "dontCompile",
      "type": "dir"
    },
    {
      "path": "node_modules/**",
      "action": "exclude",
      "type": "dir"
    },
    {
      "path": "!node_modules/{popper.js,popper.js/dist,popper.js/dist/**}",
      "action": "exclude",
      "type": "dir"
    }
  ]
},

files

To include files in your scaffolded they must be included in the files array. The files array must have the following 2 properties:

• input. The path to the file to be copied from (relative to pingy-scaffold.json).
• output. The path to copy the file to (relative to current working directory (process.cwd())). Indermediate directories will be created if they don't already exist.

"files": [
  {
    "input": "index.html",
    "output": "index.html"
  },
  {
    "input": "styles/main.scss",
    "output": "styles/main.scss"
  }
]

⚠️   Notes
When you are creating new files you should use tabs for indentation. This is not a protest vote in favour of Richard! It just makes it easier for Pingy to detab the files and convert them into 2 spaces, 4 spaces or tabs based on user preference during scaffold.

vars

Optionally you may also include a vars object. If this is included then the input file will become a template and you may use the vars in the input template using double-curly braces ({{ foo }}) for interpolation. Templating uses Markup.js.

"files": [
  {
    "input": "scripts/main.js",
    "output": "scripts/main.js",
    "vars": {
      "foo": "world"
    }
  }
]

Given the above files example: If the input file is alert('Hello {{ foo }}') then the output will become alert('Hello World').

includes (v0.11+)

From v0.11 onwards you may use the includes property. This is like the vars property except that it will read the entire file (rather than just a string) and allow you to include it within a template. This is then accessible in your template using {{ includes.x }} where x is the name of your include. Here is an example given the following excerpt from pingy-scaffold.json.

"files": [
  {
    "input": "templates/scss/template.scss",
    "output": "styles/main.scss",
    "includes": {
      "themeSCSS": "templates/dark/dark.scss"
    }
  }
]

And the following input files:

templates/dark/dark.scss

$bg-color: black;
$primary-color: white;
body { background: $bg-color; }

templates/scss/template.scss

{{ includes.themeSCSS }}
h1 { color: $primary-color}

It will yield the following output:

styles/main.scss

$bg-color: black;
$primary-color: white;
body { background: $bg-color; }
h1 { color: $primary-color}

Putting it all together

Here's a complete example:

{
  name: 'test',
  description: 'This is a test scaffold that just includes jQuery',
  dependencies: {
    jquery: '^3.2.1',
    'slick-carousel': '^1.8.1',
  },
  pingyJson: {
    minify: false,
    exclusions: [
      {
        path: 'node_modules/**',
        action: 'exclude',
        type: 'dir',
      },
      {
        path: '!node_modules/{slick-carousel}',
        action: 'exclude',
        type: 'dir',
      }
    ],
  },
  files: [
    {
      input: 'templates/scss/template.scss',
      output: 'styles/main.scss',
      includes: {
        themeSCSS: 'templates/dark/dark.scss',
      },
    },
    {
      input: 'favicon.ico',
      output: 'favicon.ico',
    },
    {
      input: 'templates/carousel.html',
      vars: {
        imageCount: '5',
      },
      output: 'index.html',
    }
  ],
}