node package manager


|ˆڡˆ|ᕗ squareboy


squareboy is a new framework based on gulp.
He is learning to swim, in the streams of node.

Currently he helps his master serve his website,
with this recipe.

He can help you build,

  • static websites
  • single page applications

( with livereload )


$ npm install -g squareboy

squareboy likes to take help, whenever he can.


Valid options are

How can he serve you ?

Show him the config.

Tell him your layout

squareboy likes freestyle layouts.

The defaults are,

recipe: .
dist: ./dist
 app: <recipe>/app
 css: <recipe>/css
 images: <recipe>/images
 fonts: <recipe>/fonts
 data: <recipe>/data
 content: <recipe>/content
 js: <dist>/js
 css: <dist>/css
 images: <dist>/images
 fonts: <dist>/fonts
 data: <dist>/data
 assets: <dist>/assets
config_file: ./config.yaml

Path is relate to <recipe>/<dist> unless Absolute.


  • <foo>: <options> maps to gulp-<foo>(<options>)
  • The default value of options is {}

1. Code

The defaults are,

app: <recipe>/app
appfile: app.js
bundlefile: bundle.js
uglify: <options>
browserify: <options>
jshintfile: <recipe>/.jshintrc

squareboy uses browserify to bundle your app code.

browersify allows you to use node module conventions for your client side js code.

squareboy is too stupid to be complex.

app.js helps squareboy and browserify preserve import ordering of your js code.

The output file is <dist>/js/bundle.js


will make bundle.min.js !

2. Design

The defaults are,

css: <recipe>/css
lessfile: styles.less
less: <options>
stylusfile: styles.stylus
less: <options>
fonts: <recipe>/css
images: <recipe>/images
minify: <options>
imagemin: <options>
rev: <options>

lessfile helps squareboy preserve import ordering of your css.

The output file is <dist>/css/styles.css

Static assets are copied as-is to,

  • <dist>/fonts
  • <dist>/img


will make styles.min.css !

3. Content

The defaults are,

content: <recipe>/content
gitlog: "git log --pretty=format:\"%h%x09%x09%ad%x09%s\" "

    parser : marked
        gfm: true
        tables: true
        breaks: false
        pedantic: true
        sanitize: true
        smartLists: true
        smartypants: true
    custom_markdown: false

gitlog helps you extract the commit histroy of a file.
.md files are rendered with markdown.
.txt files are rendered as is.

The output folder is <dist>/.
The output is dictated by morhpings.

4. Templates

The defaults are,

templates: <recipe>/templates

You can use any template language you like,
thanks to consolidate.js

squareboy as of now supports,

  • .mustache
  • .nunjucks
  • .ejs
  • .lodash

5. Data

The defaults are,

data: <recipe>/data

Use <data>/* for psuedo-dynamic contents.

Is he Moral ?


squareboy believes in control over opinions, because he knows you know better.

        arrow: |
        |_, templates, contents|
        return [{ cart: "index.nunjucks",
            sink: "index.html", 
            bags: _.sortBy(templates, "title")

The algorithm is,

for morphing in morphings
    run arrow
    for each result of arrow
        render it to sink with cart and bags

Each morphing is a morphism from templates->content.
You can use lodash library to query content and templates.
Morphings go into your config.yam or <recipe>/lib/helpers.js.


squareboy hates secrets.

config: object
contents: [ object ]
args: object

are available to every task, morphing, templates.


The defaults are,

task: compile
plugins: []

Apart from plugins, which are node modules,
you can have <recipe>/lib/tasks.


There are still some bugs along the way,
and squareboy is trying to squash them.


The defaults are,

watch: true
serve: true
port: 8080

For live reload, add the script tag in your base template.

    $ sqareboy --config config.yaml

Refer to recipe, for an idea.


use --debug for some logging.

squareboy is friends with bower

If you have <recipe>/bower.json, bower install is run.

vendor: <dist>/js/vendor