config.json

You can configure DSF via a file called config.json at the root of your project.

Each component can override this configuration with its own local config.json.

Example

{
  "components-path": "Components/",
  "glob": {
    "css": "*.{css,sass}",
    "html": "*.html",
    "js": "*.js",
    "doc": "doc.md"
  },
  "external-components": {
    "normalize.css": {
      "component-path": "./node_modules/normalize.css/"
    }
  },
  "base": {
    "css": [
      "normalize.css",
      "Base"
    ]
  },
  "process": {
    "css": [
      "gulp-sass",
      "gulp-clean-css"
    ],
    "html": [
      "gulp-lipsum-vars"
    ]
  },
  "plugins": [
    "./node_modules/dsf-export-static"
  ]
}

components-path

Default: "Components/"

The path to a directory containing multiple components.

{
  "components-path": "src/components"
}

component-path (singular)

Default: none

The path to a directory containing a single component.

{
  "component-path": "node_modules/normalize.css/"
}

glob

This is how you tell DSF how to find different resource types inside each component folder.

{
  "glob": {
    "css": "*.{css,sass}",
    "html": "*.html",
    "js": "*.js",
    "doc": "doc.md"
  }
}

external-components

Default: none

Additional components out of components-main, such as a CSS reset, framework or components from other repositories.

The key is the name of the component (whatever you like) and the value is the same configuration as this one.

{
  "external-components": {
    "normalize.css": {
      "component-path": "node_modules/normalize.css/"
    }
  }
}

base

Allows to define some components as a base for all the others. This is typically a CSS framework or reset.

Default: none

An object containing a css and js keys. The value is an array of component names.

The components must be defined via components-path or external-components

{
	"base":{
		"css": [
			"normalize.css"
		]
	}
}
// note: only CSS is supported at the moment

process

Process files using Gulp plugins. More configuration to come.

{
  "process": {
    "css": [
      "gulp-less",
      "gulp-clean-css"
    ],
    "html": [
      "gulp-lipsum-vars"
    ]
  }
}

plugins

Specify DSF plugins to use (npm modules).

  "plugins": [
    "dsf-export-static"
  ]

Learn more about the plugins.