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

koa-mincer

v1.0.2

Published

koa middleware for mincer assets

Downloads

28

Readme

koa-mincer

Provides a koa middleware for assets.

Information for use with Koa2 watch branch v2.x

npm version

Build Status Coverage Status

Dependency Status

NPM

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

contributing

  • Found a bug? Create an issue!
  • Missing Feature? Create an issue or fork the repo, implement the feature and start an pull request.

license

MIT