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

asset-pipeline

v0.3.2

Published

Runtime assets builder for Express 3

Downloads

9

Readme

Assets preprocessor/compiler for Node.js/Express. It supports a lot of popular js/css compilers like jade, coffeescript, less, stylus, ejs, etc. and allows all these compilers to work together.

This module is inspired by Asset Pipeline (from Rails world).

Main idea of this framework is applying different filters to input files based on file extension. For example, user requested file.js. But you don't write js, you write coffeescript with some preprocessor. So, this framework looks for file.js.coffee.pp, pipes it to preprocessor and gets file.js.coffee. Than compiles it to file.js and so on.

So typical build process looks like this:

                                              .- module1.coffee
file-cLee7vJT.js <-- file.js <-- file.js.ejs {-- module2.coffee                             .- template1.js.jade
                                              `- templates.coffee <-- templates.coffee.ejs {-- template2.js.jade
                                                                                            `- template3.js.jade
                                                 .- module1.less
file-USzt9bQs.css <-- file.css <-- file.css.ejs {-- module2.styl         .- image1.png
                                                 `- backgrounds.css.ejs {-- image2.png
                                                                         `- image3.png

It means that you have a whole bunch of different files in your project, and this module can combine them together in any way you want.

Module builds a file when user requests it first time, and then tracks all its dependencies to see if anything is changed. So first request is usually slow, but other requests should be as fast as requests to static files.

Usage examples

See tests application, I hope it can give some ideas how it can be used.

Syntax (for Express framework):

// here's standard Express server declaration
var express = require('express')
app = express.createServer();
app.listen(80);

// configuring assets pipeline (full definition of config options see below)
app.use(require('asset-pipeline')({
	// reference to a server itself (used in views rendering)
	server: app,
	// directory with your stylesheets or client-side scripts
	assets: './assets',
	// directory for cache
	cache: './cache',
}))

Config options

  • assets (default: "./assets") - path to your assets (directory where this module does search all files and dependencies)
  • cache (default: "./cache") - path to a cache (you should create an empty directory where all compiled assets will be prepared and served)
  • extensions (default: [".js", ".css"]) - if user have requested file without md5 in it, module will serve to user only files with these extensions (see below)
  • files (default: []) - a list of additional files you want to serve (see below)
  • min_check_time (default: 1000) - time in milliseconds, module won't check any file for updates faster than specified here (set a small value for development but large on production)
  • debug - print to stdout some additional debug info

Supported plugins

Embedded javascript (EJS)

It is a template engine. I put it first because I use it almost everywhere as a clue between files.

This plugin can transform FILE.ejs to FILE. You need to have ejs module installed.

For example, if I want to have a coffeescript file file.coffee with compiled jade template located in template.jade in it, I will write a file file.coffee.ejs with something like that:

# build a template function
`var template = <%-asset_include('template.js') %>;`

# use template function somehow
$('.data').first().after(template(users: args))

Coffeescript

Coffeescript language compiler. It's used often to compile client-side javascript out of coffeescript sources.

This plugin can transform FILE.coffee to FILE or FILE.js. You need to have coffee-script or iced-coffee-script installed.

Iced Coffeescript

Iced Coffeescript compiler.

This plugin can transform FILE.iced to FILE or FILE.js. You need to have iced-coffee-script module installed.

Embedded coffeescript (ECO)

Embedded coffeescript. Honestly, I didn't find this plugin useful.

This plugin will transform FILE.eco to FILE. You need to have eco module installed.

Less CSS

CSS preprocessor.

This plugin will transform FILE.less to FILE or FILE.css. You need to have less module installed.

Stylus

CSS preprocessor.

This plugin will transform FILE.styl to FILE or FILE.css. You need to have stylus module installed.

Jade compiler

Jade compiler. This plugin is used to build a compiled template (a javascript function) out of jade template.

This plugin can transform FILE.jade to FILE or FILE.js. You need to have jade module installed.

Jade renderer

Jade compiler. This plugin is used to render a html page out of jade template.

This plugin can transform FILE.jade to FILE or FILE.html. You need to have jade module installed.

Haml

HAML language. I use Jade instead of it, but maybe it'll be useful for someone.

This plugin will transform FILE.haml to FILE or FILE.html. You need to have haml module installed.

Markdown

Markdown language. Can be used to build up a HTML page.

This plugin will transform FILE.md to FILE or FILE.html. You need to have node-markdown module installed. I know there is a lot of markdown modules, so ask me if you want to use another one.

Writing custom plugin

If you have some compiler you want to use, and it is not (yet?) supported by assets-pipeline, you can just write your own module and copy it to plugins directory.

Your module should export object simular to that (you can look inside existing plugins):

module.exports = {
  // file extension (or array of these extensions) of files 
  // that will be processed by your plugin, mandatory
  source: 'coffee',

  // file extension (or array of these extensions) of target files, optional
  target: 'js',

  // your compiler, arguments: source code, some options 
  // (options.filename is quite useful) and a callback(err, compiled_code)
  compile: function(code, options, callback) {
    callback(null, require('coffee-script').compile(code));
  }
};

If your compiler does not support including other files, your plugin will be nice and simple. If it does and you want to track all dependencies, just write an issue and ask for help (because of some really dark magic starting here).

TODO list

  • css and js minification
  • line mapping support
  • documentation

Philosophy

This library writes output files to a cache and calls connect.static to serve them. Reasons:

  • in development enviroment: it's more verbose and logical. Pipeline is for compiling, Express.static for serving. You can always see what is in the cache and so on.
  • in production enviroment: assets-pipeline just exports a few template functions. So, in production there will be no performance impact.