npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

tribble

v0.1.4

Published

Boilerplate for static & microservices-based web applications

Downloads

6

Readme

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 :

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.