Tribble

Boilerplate for static & microservices-based web applications.
It aims to provide some sort of Asset Pipeline for static and Node.js based projects.

Install

$ npm install tribble --save-dev

Usage

Configuration

Runtime configuration can be set through a .tribblerc file with the following keys :

• source : source files distribution relative to project root
• target : production-ready files distribution relative to project root

Code linting

Tribble is packaged with ESLint and Airbnb's ESLint base configuration, including ECMAScript 6+ rules. The source parameter can be used to override the default source parameter specified in the .tribblerc runtime configuration file.

$ ./node_modules/.bin/tribble lint [--source <folder>]

Web app preview

Tribble is packaged with Browsersync. The serve command launch a browsersync server with the built-in static server pointing to folder on port number. This command is intend to live preview web app's source file distribution and executed only preprocessor to aggregator plugins. The source and port parameters can be used to override the corresponding parameters specified in the .tribblerc runtime configuration file.

$ ./node_modules/.bin/tribble serve [--source <folder>] [--port <number>]

Build

The build command executed all installed plugins (from preprocessor to packager) on the source files distribution folder and processed/aggregated assets are copied to the production-ready files distribution target. The source and target parameters can be used to override the corresponding parameters specified in the .tribblerc runtime configuration file.

$ ./node_modules/.bin/tribble build [--source <folder>] [--target <folder>]

Plugins

Each plugin is designed to perform live processing (for the source files distribution through Browsersync middlewares) and/or build (for the production-ready files distribution).

Public plugins

Public plugins are provided for the most common processing tasks.

Current available public plugins are :

• sass for Syntactically Awesome Style Sheets (SASS) files (*.sass or *.scss) through node-sass module

To install a public plugin :

$ ./node_modules/.bin/tribble install <plugin>

To uninstall a public plugin :

$ ./node_modules/.bin/tribble uninstall <plugin>

Public plugins are installed under the current project devDependencies flag.

Private plugins

You can also define private/local plugins like the public ones.
To do so, create a tribble.json file for one (or several) plugin(s) with the following structure (inspired by Swagger specification) :

{
    "path/to/module1": {
        "tags": ["preprocessor"], // plugin main caracteristics
        "consumes": ["mediatype1", "mediatype2", ...],
        "produces": ["mediatype1", ...]
    },
    "path/to/module2": {
        ...
    }
}

Plugin characteristics (defined as tags) are used to order plugins and build tasks pipelines.
They can have the following values :

• preprocessor (ex: SASS, Coffeescript)
• transform (ex: any transformation plugin)
• postprocessor (ex: postCSS)
• aggregator (ex: templating engine)
• bundler (ex: r.js)
• minifier (ex: Closure)
• packager (ex: zip compression, Electron)

Each plugin module is defined as follow :

module.exports = (input, ouput) => {
    const data = input.read();
    ... // any synchronous/asynchronous transformation to data object
    ouput.send(data);
};
 

Please check the sass plugin for implementation example.