Koa-mincer NPM

koa-mincer

Provides a koa middleware for assets.

Information for use with Koa2 watch branch v2.x

koa-mincer version	koa version	branch	npm tag
1.x	1.x	master	latest
2.x	2.x	v2.x	next

installation

$ npm install --save koa-mincer

usage

"use strict";

const koa = require('koa');
const koaMincer = require('koa-mincer');

const app = module.exports = koa();

// ...

app.use(koaMincer({
    root: __dirname,
    production: app.env === 'production',
    mountPoint: '/assets',
    manifestFile: __dirname + "/public/assets/manifest.json",
    paths: [
        'assets/css',
        'assets/js',
        'assets/templates'
    ]
}));

// ...

if (!module.parent) app.listen(process.env.PORT || 3000);

options

koa-mincer got some new options like

configure: you can configure the connect-mincer and mincer object in this function because the library is expected to be used as middleware direct there must be a way to configure these objects like this:

//...
app.use(koaMincer({
    //...
    configure: (connectMincer) => {
        connectMincer.Mincer.CoffeeEngine.configure({ bare: false });
    }
    //...
}));
//...

All other infos about options can be found at connect-mincer (https://github.com/clarkdave/connect-mincer#in-more-detail)

For more infos about engines visit Mincer API Documentation.

about mincer

Information can be found here.

about connect-mincer

Information can be found here.

Precompiling for production

Simple Precompile Script:

var Mincer = require('mincer');

var env = new Mincer.Environment('./');
env.appendPath('assets/js');
env.appendPath('assets/css');
env.appendPath('vendor/js');

var manifest = new Mincer.Manifest(env, './public/assets');
manifest.compile(['*', '*/**'], function(err, data) {
  console.info('Finished precompile:');
  console.dir(data);
});

More infos at connect-mincer (https://github.com/clarkdave/connect-mincer#precompiling).

example usage with bower

use an .bowerrc to locate your assets/vendor folder like this

{
    "directory": "app/assets/vendor"
}

add a .gitignore file inside the vendor folder

# app/assets/vendor/.gitignore

# Ignore everything here
*

# Except this file
!.gitignore

add a bower.json file (near package.json) and add your dependencies like this

{
    "name": "my-app",
    "version": "1.0.0",
    "dependencies": {
        "jquery": "*",
        "angular": "*",
        "bootstrap": "*"
    }
}

Contgratulations. You can use bower assets now

precompiling with bower deps and/or fonts etc.

these scripts may help you!

// app/config.js

module.exports = {
    //...
    assets: {
        root: __dirname,
        production: process.env.NODE_ENV === 'production',
        mountPoint: '/assets',
        manifestFile: __dirname + "/public/assets/manifest.json",
        paths: [
            'assets/css',
            'assets/js',
            'assets/templates',
            'assets/vendor'
        ]
    },
    
    precompile: { 
        target: __dirname + "/public/assets",
        files: [
            // Your targeted ASSETS which required the whole rest like bootstrap etc.
            'app.js', 
            'app.css',
            
            // IMAGES AND FONTS
            '*.eot',
            '*.svg',
            '*.ttf',
            '*.woff',
            '*.woff2',
            '*.png',
            '*.gif',
            '*.jpg',
            '*.ico',
            '**/*.eot',
            '**/*.svg',
            '**/*.ttf',
            '**/*.woff',
            '**/*.woff2',
            '**/*.png',
            '**/*.gif',
            '**/*.jpg',
            '**/*.ico',
        ]
    }
    //...
};

// bin/precompile.js

var Mincer = require('mincer');
var config = require('../app/config.js'); // the assets config

var env = new Mincer.Environment(config.assets.root); // Environment with defined root path

// add all your asset paths
for(var i = 0; i < config.assets.paths; i++) {
    env.appendPath(config.assets.paths[i]);
}

// Register an Helper for using inside Assets
env.registerHelper('asset_path', function(name, opts) {
  var assetPath = null;
  var asset = env.findAsset(name, opts);
  if (!asset) throw new Error("File [" + name + "] not found");
  if (config.assets.production) {
    assetPath = '/assets/' + asset.digestPath;
  } else {
    assetPath = '/assets/' + asset.logicalPath;
  }
  return assetPath;
});

// __dirname == "bin" folder
var manifest = new Mincer.Manifest(env, config.precompile.target);
manifest.compile(config.precompile.files, function(err, data) {
  if(err) {
    console.error(err);
  } else {
    console.info('Finished precompile:');
    console.dir(data);
  }
});

fonts are a problem because normally they won't be found if you using e.g. font-awesome. here is a fix for this problem (it using the registered helper asset_path())

//= require bootstrap/bootstrap.min.css
//= require font-awesome/css/font-awesome.css

@font-face {
  font-family: 'FontAwesome';
  src: url(asset_path('font-awesome/fonts/fontawesome-webfont.eot')+'?v=4.4.0');
  src: url(asset_path('font-awesome/fonts/fontawesome-webfont.eot')+'?#iefix&v=4.4.0') format('embedded-opentype'), 
       url(asset_path('font-awesome/fonts/fontawesome-webfont.woff2')+'?v=4.4.0') format('woff2'), 
       url(asset_path('font-awesome/fonts/fontawesome-webfont.woff')+'?v=4.4.0') format('woff'), 
       url(asset_path('font-awesome/fonts/fontawesome-webfont.ttf')+'?v=4.4.0') format('truetype'), 
       url(asset_path('font-awesome/fonts/fontawesome-webfont.svg')+'?v=4.4.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

body
  padding-top: 60px