Skip to content
Dieter Geerts edited this page Jan 17, 2017 · 10 revisions

QUICK START

0. Install node.js

Fabricator Builder is built on node.js, a platform for building fas, scalable network applications. There are pre-built installers for each platform. You can also install with Homebrew via brew install node.

1. Create your toolkit project

You can create your toolkit project with npm, or you can start from the Fabricator Starter Project.

2. Add the Fabricator Builder dependency

$ npm install fabricator-builder --save-dev

3. Configure your toolkit

These are all the configuration settings you need to/can use:

{
  "dest"      : "path.to.build.directory",
  "package"   : "path.to.your.package.file",
  "docs"      : "glob.to.your.docs.files",
  "materials" : "glob.to.your.materials",
  "templates" : "glob.to.your.templates",
  "data"      : "glob.to.your.data.files",
  "samples"   : "glob.to.your.samples",
  "analyze"   : "glob.to.your.scripts.you.want.to.analyze",
  "jscsrc"    : "optional.path.to.your.jscsrc.file",
  "jshintrc"  : "optional.path.to.your.jshintrc.file",
  "useWebpack": true,
  "scripts"   : {
    "name.of.resulting.js.file": "glob.to.your.scripts.for.this.file"
  },
  "fonts"     : "glob.to.your.fonts",
  "icons"     : "glob.to.your.icons",
  "images"    : "glob.to.your.images",
  "styles"    : {
    "name.of.resulting.css.file": "glob.to.your.styles.for.this.file"
  },
  "toolkitConfig": "path.to.your.toolkitConfig.file",
  "tslint"       : "optional.path.to.your.tslint.file",
  "typescript": {
    "dest": "optional.path.to.the.ts.lib.directory",
    "comp": "optional.glob.to.your.ts.components"
  }
}

You can read about the details of the configuration in the section Working with Fabricator Builder

4. Building your toolkit

Using gulp, you can build your toolkit with Fabricator Builder

// Inside your gulpfile.js

var fabricatorBuilder = require('fabricator-builder');
var gulp              = require('gulp');

gulp.task('default', function () {
    fabricatorBuilder(require('./fabricatorConfig'));
});

5. Next steps...

Learn about toolkit-driven development or dig right into using materials, rapid prototyping and data