Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Control script minification from DOM
JavaScript

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
bin
.gitignore
CHANGES
LICENSE
README.md
notemplate-minify.js
package.json

README.md

notemplate-minify

Middleware for express-notemplate. Minify and merge javascript and css assets, configurable with xhtml attributes.

Why ?

Javascript libraries and their CSS stylesheets are easier to distribute, debug and even understand when they are not minified. That way it is possible to :

  • npm install myjslib
  • ln -s ./node_modules/myjslib/mylib.js public/javascripts/mylib.js
  • debug
  • npm update myjslib

On production one wants to minify and reduce the number of js files to be loaded. notemplate-minify provides a very simple yet configurable way to do that:.

Express 3 Setup

var notemplate = require('express-notemplate');
// minify config variable accepts false, "cat", true.
// false doesn't do a thing
// "cat" autoprefixes and concatenates without minifying
// true autoprefixes, concatenates, and minifies.
app.set('minify', app.settings.env != "development");
// app.set('minify', false | "cat" | true);
app.set('statics', process.cwd() + '/public');
app.set('views', process.cwd() + '/views');
app.engine('html', notemplate.__express);
app.set('view engine', 'html');
app.use(express.static(app.get('statics')));
// this will check if minification is needed only once, not each time the view is rendered
notemplate.on('ready', require('notemplate-minify'));

// this will check if minification is needed every time the view is rendered - avoid it even if it's not an intensive task
notemplate.on('render', require('notemplate-minify'));

Usage

Starting from some script tags, you decide which ones are going to be merged/minified, and to which file :

<link rel='stylesheet' type='text/css' notemplate:minify="stylesheets/mypage.min.css" href='stylesheets/boilerplate.css' />
<link rel='stylesheet' type='text/css' notemplate:minify="stylesheets/mypage.min.css" href='stylesheets/mypage.css' />
<link rel='stylesheet' type='text/css' notemplate:minify="stylesheets/mypage.min.css" href='stylesheets/jqueryui-theme/jquery.ui.all.css' />
<link rel='stylesheet' type='text/css' notemplate:minify="stylesheets/mypage.min.css" href='stylesheets/jqueryui-timepicker.css' />
<!--[if lte IE 8]><link rel="stylesheet" href="stylesheets/ie.css" notemplate:minify="stylesheets/ie.min.css" /> /><![endif]-->

<script src="javascripts/modernizr.js"></script>
<script class="bundle" src="javascripts/jquery.js" notemplate:minify="javascripts/bundle.js"></script>
<script class="bundle" src="javascripts/moment.js" notemplate:minify="javascripts/bundle.js"></script>
<script class="bundle extra" src="javascripts/moment.fr.js" notemplate:minify="javascripts/bundle.js"></script>
<script src="javascripts/jquery-ui.js" notemplate:minify="javascripts/jqueryui.min.js"></script>
<script src="javascripts/jquery-ui.fr.js" notemplate:minify="javascripts/jqueryui.min.js" notemplate:john="doe"></script>

This will produce three new files, mypage.min.css, bundle.js and jqueryui.min.js, containing the minified and merged files. On top of that, thanks to using express-notemplate, the rendered html is automatically modified to be :

<link rel='stylesheet' type='text/css' href='stylesheets/mypage.min.css' />
<script src="javascripts/modernizr.js"></script>
<script class="bundle extra" src="javascripts/bundle.js"></script>
<script src="javascripts/jqueryui.min.js" notemplate:john="doe"></script>

As seen in this example, class attributes are saved and added, and notemplate:* attributes are kept and overwritten.

Features

Stylesheets are auto-prefixed and minified when:

  • their sources are modified
  • any template using them is modified

KNOWN BUGS

Q minified file not up-to-date. A When deploying or pulling from git, touch views/*

Q if a stylesheet and its images is in a subdir of the minified css, the paths will be wrong. A Add a symlink to the subdir assets in the dir containing the minified file.

Something went wrong with that request. Please try again.