objectus

Compile a recursive directory tree of JSON and YML files into an object

var objectus = require('objectus');
 
objectus('dat/', function(error, result) {
  if (error) { console.log(error); }
  console.log(result);
});

Why?

• Unify data that is needed in multiple preprocessors like meta tags, colors, fonts, etc.
  • Ex: I define colors and fonts to populate a style guide, and then use them throughout the HTML and CSS preprocessors
• Allow the possibility of others to contribute who are not familiar with the technology in use
  • Give copywriters access to their copy seamlessly
  • Give designers access to font and color values seamlessly

Installation

$ npm install objectus

Basic Usage

Say you have all your config & copy in the folder dat/ and your meta tags in dat/meta.yml looking like

---
url: http://www.example.url/
tags:
  title: website title
  description: "website description"

If you ran

objectus('dat/', function(error, result) {
  console.log(result);
});

You would see

meta: {
  url: "http://www.example.url/",
  tags: {
    title: "website title",
    description: "website description"
  }
}

Now throw in some colors you need accessed in HTML and CSS in dat/guide/ called colors.yml and

---
blue1: "#0000FF"
red1: "#FF0000"

..will stack and then result in

meta: {
  url: "http://www.example.url/",
  tags: {
    title: "website title",
    description: "website description"
  }
},
guide: {
  colors: {
    blue1: "#0000FF",
    red1: "#FF0000"
  }
}
 

Note: Folders become keys and values are the objectus'ed files, so specifying a key in a folder the same name of a directory in the same will result in one overwriting the other

Gulp Integration

Start with grabbing our data, then a task to do the same

 
var objectus = reuqire('objectus');
 
objectus('dat/', function(error, result) { data = result; });
 
gulp.task('objectus', function() {
  objectus('dat/', function(error, result) {
    data = result;
  });
  return true;
});

Now lets pass our data into a CSS preprocessor, say Stylus

gulp.task('stylus', function() {
  gulp.src('sty/main.styl')
    .pipe(stylus({ rawDefine: { data: data } })
    .pipe(gulp.dest('pub/css'))
});

How about an HTML template engine like Jade / the new name Pug

gulp.task('jade', function() {
  gulp.src('tpl/**/index.jade')
    .pipe(jade({pretty: true, locals: {data: data}}))
    .pipe(gulp.dest('pub'))
});

Make sure when you are watching files that are compiled passing objectus, you re-compile them afterwards

  gulp.watch('dat/**/*', ['objectus','stylus','jade']);

Now lets get fancy, here is a more detailed example involving browserSync, gulp-notify, and gulp-sourcemaps

 
var gulp = require('gulp');
var sync = require('browser-sync').create();
var notify = require('gulp-notify');
var stylus = require('gulp-stylus');
var jade = require('gulp-jade');
var sourcemaps = require('gulp-sourcemaps');
 
var objectus = require('objectus');
 
objectus('dat/', function(error, result) {
  if (error) {
    notify(error);
  }
  data = result;
});
 
gulp.task('objectus', function() {
  objectus('dat/', function(error, result) {
    if (error) {
      notify(error);
    }
    data = result;
  });
  return true;
});
 
gulp.task('stylus', function() {
  gulp.src('sty/main.styl')
    .pipe(sourcemaps.init())
    .pipe(stylus({ rawDefine: { data: data } })
    .on('error', notify.onError(function(error) {
      return {title: "Stylus error: " + error.name, message: error.message, sound: 'Pop' };
    })))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('pub/css'))
    .pipe(sync.stream());
});
 
 
gulp.task('jade', function() {
  gulp.src('tpl/**/index.jade')
    .pipe(jade({pretty: true, locals: {data: data}})
      .on('error', notify.onError(function(error) {
        return {title: "Jade error: " + error.name, message: error.message, sound: 'Pop' };
      }))
      .on('error', function(error) {
        console.log(error);
      })
    )
    .pipe(gulp.dest('pub'))
    .pipe(sync.stream());
});
 
gulp.task('sync', function() {
  sync.init({
    server: {
      baseDir: 'pub/',
    }
  });
 
  gulp.watch('dat/**/*', ['objectus','stylus','jade']);
  gulp.watch('sty/**/*.styl', ['stylus']);
  gulp.watch('tpl/**/*.jade', ['jade']);
 
});
 
gulp.task('default', ['objectus','stylus', 'jade']);
 

Why call it objectus

The origin of the word object

Middle English, from Medieval Latin objectum, from Latin, neuter of objectus, past participle of obicere to throw in the way, present, hinder, from ob- in the way + jacere to throw