Punk, carefree Browser-side Javascript Asset Bundling for Express sites

#Cassette Express

The short version: CI friendly Javascript asset bundling for those of us who don't want to rewrite our client side Javascript as CommonJS modules

The long version:

  • Reference a Javascript file in your template. Get it, and all dependencies, in the right order, in the page.
  • CI Friendly. No separate build process. No command line tools.
  • Declare dependencies as comments with relative paths, i.e, // @reference ../lib/jquery.1.7.2.js
  • Reference entire directories instead of individual files with // @reference ../lib
  • Debug mode returns individual javascript files to the browser and dynamically responds to your changes.
  • Production mode bundles all javascript into a single minified download using Uglify.

Because this isn't a CommonJS based system, you can use all the same javascript libraries and files you're already using. You can even use it with Ender, too, by referencing the unminified version, ie., // @reference ../lib/ender.js.


Working, ready for real world testing

##Known issues

  • Some test coverage for debug and production mode specific behaviours not there yet
  • Insufficient documentation.
  • No ability to reference external scripts yet
  • Insufficient real world testing to know what the known issues really are.


Cassette-Express is an adaptation of Andrew Davey's Cassette (, a .net package which helps developers manage CSS, Javascript, Coffeescript assets. It is amazingly useful. I wanted to use the same client side javascript in Node projects and discovered the same functionality - working with any javascript, not just CommonJS modules - didn't exist.


npm install cassette-express


In typical ExpressJS app.js file, assuming you're still using the default /public/javascripts

// debug mode, every request the files are checked for changes & individual file downloads.
var cassette = require('cassette-express')();

// or production mode, generated once per restart. One single minified download.
var cassette = require('cassette-express')({ mode : 'production' });

A little later on in app.js we make sure we have access to Cassette inside the templates..

app.set('view options', {
    assets : cassette.middleware()

Then in our template, i.e, layout.jade:

!= assets.useAsset('/app/client-app.js')

Which, in debug mode, would output something like...

<script src="/javascripts/lib/jquery.js"></script>
<script src="/javascripts/lib/jquery-someplugin.js"></script>
<script src="/javascripts/lib/jquery-some-other-plugin.js"></script>
<script src="/javascripts/lib/underscore.js"></script>
<script src="/javascripts/lib/my-own-library-stuff.js"></script>
<script src="/javascripts/app/app-namespace.js"></script>
<script src="/javascripts/app/features/navigator.js"></script>
<script src="/javascripts/app/features/content.js"></script>
<script src="/javascripts/app/client-app.js"></script>

And in production mode all those scripts are merged, minified and then you get...

<script src="/javascripts/cassette/AEEE546E7B7C7BCEBC.min.js"></script>

By default the compiled files are put in /public/javascripts/cassette.

The gathering and sorting of dependencies is done automatically. In debug mode bundles are reassembled if there are any changes to teh sources. In production mode, node must be restarted before a new minified bundle is generated.


In the repo, in the EXAMPLE folder, there's a skeleton Express.js application. The files of interest are app.js, views/index.jade and the javascript files in /public/javascripts. If you go into this folder, do npm installthen node app.jsyou can test it's working.

##Cassette Options

The only real configuration is to do with paths.

// this...
var cassette = require('cassette-express')();
// is a shortcut for..
var cassette = require('cassette-express')({
        assetsPath : '/public/javascripts',
        outputPath : '/javascripts',
        buildPath : '/cassette',
        mode : 'debug'

If your javascript assets are somewhere else, this is how you would configure that. It's probably best to leave the buildPath as '/cassette' - this makes your minified bundles output to /public/javascripts/cassetteby default.

This API is pretty horrible. Sorry.

##Next Steps

  • Integration with Amazon S3 to allow automatic upload of minified bundles
  • Add a dependency by referencing an external file, have that file downloaded and added to your bundle.
  • If people want it, I could add automatic Coffeescript compiling. So far no-one wants it.

Differences between Cassette-Express and Cassette MVC

  • Bundles are automatically generated by requesting any particular resource inside templates. You don't need to pre-reference them.
  • Bundles will always be one single file in production mode, not multiple files depending on how they were pre-referenced.
  • No automagic coffeescript compiling. Poor Coffeescript.
  • No stylesheet merging/compiling.
  • Significantly less features. Ha.





  • 🙋Hanjst汉吉斯特改进+enSafeExpression安全表达式等

    Hanjst汉吉斯特模版语言及模版引擎,近期持续改进升级。 这次改进主要是增加了对安全输出表达式兼容,由于涉及到对软件开发过程中的效率和软件运行效率的平衡和取舍,所以多写了几句,以描述这个权衡利弊对...

    8 天前
  • 项目总结 - 构建vue cli3.0+express项目

    简介:本篇是记录搭建流程,不过多叙述,搭建的细节,主要以前端为主,项目是主要是为了重构前端代码,后端代码完全复用,还会有篇主要讲node项目的搭建 项目背景: 开发环境前后端同时实现热加载...

    2 年前
  • 通过变量来使用next()在expressjs未来中间件

    cchamberlainuser2791897(提出了一个问题:passing variable...

    2 年前
  • 笔记:解读express 4.x源码

    此为裁剪过的笔记版本。 原文在此: 感谢@...

    2 年前
  • 深入剖析Express cookie-parser中间件实现

    文章导读 cookieparser 是Express的中间件,用来实现cookie的解析,是官方脚手架内置的中间件之一。 它的使用非常简单,但在使用过程中偶尔也会遇到问题。

    2 年前
  • 文件的上传与下载实现(react、express,create-react-app脚手架)

    项目结构为前后端分离,中间布了一层node。 文件上传 要求:将文件信息等发送到后台。 html代码 客户端上传文件时的信息处理 可以使用FormData来异步上传一个二进制文件。

    2 年前
  • 探讨Express Router & Route

    基于 Node.js 平台,快速、开放、极简的 web 开发框架 安装 成功生成后,会产生以下的目录和文件: 接下来我们通过: 启动程序后,访问127.0.0.1:3000,就...

    2 年前
  • 手把教你搭建SSR(vue/vue-cli + express)


    1 年前
  • 手把手用 express 搭建后台

    前言 想必很多小伙伴开始学 node 的时候想搞个项目出来却不知道怎么下手吧,这个教程的话就是教大家用 express 框架简单粗暴搭建一个可以用的后台出来,然后关于 node 和 express 的...

    1 年前
  • 手写一个 Express(初级版)

    序: 因为公司 方面业务都是基于一个小型框架写的,这个框架是公司之前的一位同事根据 的中间件思想写的一个小型 框架,阅读其源码之后,对 的中间件思想有了更深入的了解,接下来就手写一个 框...

    1 年前


扫码加入 JavaScript 社区