proto-build

npm install --save-dev proto-build

Proto-Build was created for less-than-ideal development environments that make modern front-end workflows untenable. You create snippets of HTML that represent your project's UI and place them in your models/ directory. Proto-build uses templates and your input options to build a basic sandbox environment with an index of your models. Global css and js will be applied, project state is saved, and subsequent runs will update only the parts of your project that changed.

Methods

init(options)

Runs project setup, compares project state, updates project accordingly.

watch(options [,callback])

Runs init() and uses chokidar to watch for model and template updates.

writeAssets(options [,callback])

Runs project setup and regenerates declared assets (global and model-specific).

Model Config

Insert model config text at the top of your snippet to add additional assets or display the status of your model. CSS and JS assets will always be relative to that particular model.

css: ../relative/to/that/model.css
css: ../other/one/file.css
js: ../some/script.js
status: wip (or done)
===
<div class="snippet-here">
  ...
</div>

Example Gulp Workflow

var gulp = require('gulp');
var sync = require('browser-sync').create();
var pb = require('proto-build');

var options = {
  name: 'Proto-Build Model Index',
  models: 'test/models',
  output: 'test/output',
  css: ['../css/styles.css']
}

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

  // start proto-build watch
  // callback only fires on file updates
  pb.watch(options, sync.reload);

  // start browser-sync
  sync.init({ server: './', startPath: 'test/output' });
  
  // watch for css, rewrite assets, and inject
  gulp.watch('test/css/**/*', function() {
    pb.writeAssets(options, function() {
      gulp.src('test/css/**/*').pipe(sync.stream({match: '**/*.css'}));
    })
  })

  // watch for js, rewrite assets, and reload
  gulp.watch('test/js/**/*', function() {
    pb.writeAssets(options, function() {
      sync.reload();
    })
  })
})

Options

None of your declared paths have to exist when declared. Proto-Build will make and populate them for you.

var options = {

  name: 'Project Name',
  // (string) project name that appears on index page

  models: 'path/models/',
  // (string) path to model directory
  
  output: 'path/output/',
  // (string) path to output directory

  css: ['path/style.css'],
  // (array) paths to css files (relative to output)

  js: ['path/script.js'],
  // (array) paths to js files (relative to output)

  templates: 'path/templates/',
  // (string) path to folder with template overwrites

  fileMode: 0755,
  // (integer) permissions for created files (0744 default)

  dirMode: 0755
  // (integer) permissions for created directories (0744 default)
  
}