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

compact

v1.0.0

Published

A JavaScript compacting middleware for express

Downloads

696

Readme

compact.js

A simple JavaScript compacting middleware for express

build status

Installation

npm install compact

Usage

Initialise compact:

var compact = require('compact').createCompact({
  srcPath: __dirname + '/public/src/',
  destPath: __dirname + '/public/compact/',
  webPath: '/js/compact/',
  debug: false
});
  • srcPath is the path to your frontend JavaScript. (If you initialised your project with Express' quick start, you probably want to set this to /public/javascripts).
  • destPath is the path that compact should use to store the compacted assets. If this directory does not exist, it will be created.
  • webPath is the public public facing route to your destPath (This will preceed the filename of the output <script> tags, so webPath: '/js/compact/' -> <script src="/js/compact/myscript.js">).
  • debug is optional. If set to true, the scripts will not be concatenated or minified.

Create namespaces:

Namespaces are used to create different compilations of scripts. Usually, you will want to create a global namespace that is used everywhere:

compact.addNamespace('global');

compact.ns.global
  .addJs('/js/main.js')
  .addJs('/js/widget-a.js')
  .addJs('/js/widget-b.js');

If you have some collection of scripts that will only be used on certain pages, it is a good idea to create a namespace for it. For example, if you have a banner and some ads that only appear on the homepage, and some UI that appears only on the profile page/section:

compact.addNamespace('home')
  .addJs('/js/banner.js')
  .addJs('/js/ads.js');

compact.addNamespace('profile')
  .addJs('/js/profile.js');

When creating a namespace, you can also pass in an extra srcPath. Calls to addJs() will look for the file in the given srcPath, and if not found it then tries the srcPath passed to createCompact().

compact.addNamespace('comments',  __dirname + 'libs/comments/public/src/' )
  .addJs('/js/paging.js')
  .addJs('/js/comments.js');

Using the middleware:

If you have created a global namespace, you can apply it to all routes like so:

app.use(compact.middleware(['global']));

This will expose the view helper compactJsHtml() in your templates, so you can output the necessary <script> tags.

Note that this should appear after middleware for serving static assets.

Route Specific Middleware

For most use cases you'll probably want to apply namespaces on a per route bases:

// Add some compacted JavaScript for just this route. Having the namespaces
// in separate arrays will produce a javascript file per array.
app.get(
  '/',
  compact.js(['home'], ['profile']),
  function (req, res) {
  /* Homepage logic here */
  }
);

// Having different namespaces joined together
// will combine and output as one javascript file.
app.get(
  '/',
  compact.js(['comments', 'profile']),
  function (req, res) {
    /* Blog page logic here */
  }
);

Note: compact must be applied to your route before the route logic. This is so that the view helper is available when you try to render your layout.

Bulk Config

You can defined all the namespaces and js files in a JSON schema using the configure function.


var compact = require('compact').createCompact(...);

compact.configure({
    prepend: [
        '/config.js'
    ],

    append: [
        '/garbageCollector.js'
    ],

    cmsSourcePath: '/public/vendor/cms/',
    cms: [
        'prepend',
        '/myModel.js',
        '/bootstrap.js',
        'append'
    ]
});

In this example you can see that you can either reference a JavaScript file or an existing namespace.

Rendering

Any route that has compact.js() applied will have the helper function compactJsHtml() available. This will render the relevant script tags. In Jade, Use like so:

!=compactJsHtml()

From the examples above, on / you'd get the following

<script src="/js/compact/global.js"></script>
<script src="/js/compact/home.js"></script>
<script src="/js/compact/profile.js"></script>

And on /blog you'd get this

<script src="/js/compact/global.js"></script>
<script src="/js/compact/comment-profile.js"></script>

You also have access to the compactJs() helper which will return an array of files instead of the rendered html.

Credits

Paul Serby follow me on twitter

Licence

Licenced under the New BSD License