objectus

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

var objectus = require('objectus');

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

How it works

All YAML and JSON files in the specified folder becomes one single object. Folders and file names become keys and values are the content

Note: Specifying a key in a folder that is the same name of a directory will result in one overwriting the other

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 config/ and your meta tags in config/meta.yml looking like

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

If you ran

objectus('config/', 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 config/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"
  }
}

Integration

Gulp

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

var objectus = reuqire('objectus');

objectus('config/', function(error, result) { data = result; });

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

Now you have data as a global object you can pass into any task needed. Make sure when you are watching files that are compiled passing objectus, you fire your objectus task first, so they get the updated data

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

Stylus

Stylus has a define parameter you can pass, making the 3rd option true allows it to be passed 'raw'

stylus(str).define('data', data, true)

In Gulp we use gulp-stylus and accord using rawDefine which I made sure works

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

Sass (node-sass)

We'll write to a file somewhere you can @import it, make sure this is done before the sass compilation

fs.writeFileSync('pub/jst/data.js', "var data = " + JSON.stringify(data) + ";", 'utf8')

@import 'pub/jst/data.json'

Note: If you know of a better way of doing this please let me know

Javascript / CoffeeScript

Same simplicity, just dump our data somewhere to pick it up client-side

fs.writeFileSync('pub/jst/data.js', "var data = " + JSON.stringify(data) + ";", 'utf8')

<script type="text/javascript" src="/jst/data.js" />

Jade / the new name Pug

Jade has a locals parameter, perfect

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

Detailed Example

Here is a more detailed example with Stylus and Jade 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('config/', function(error, result) {
  if (error) {
    notify(error);
  }
  data = result;
});

gulp.task('objectus', function() {
  objectus('config/', 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('config/**/*', ['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