happngin-assets

Happngin javascript, stylesheet and angular template production packager.

Usage no npm install needed!

<script type="module">
  import happnginAssets from 'https://cdn.skypack.dev/happngin-assets';
</script>

README

npm install happngin-assets --save

Usage:

In mesh config:


bowerDirectory = require('path').normalize(__dirname + '/../bower_components');

  ...
  components: {
    "assets": { // defaults to require module 'happngin-assets'
      masks: [
        'http://localhost',
        bowerDirectory
      ],
      js: [
        'http://localhost/firstMeshComponent/static/client.js',
        'http://localhost/anotherMeshComponent/static/client.js',
        'http://cdn.zz.net/kquery/0.5.6/kquery.js',
        bowerDirectory + '/jquery/dist/jquery.js',
        bowerDirectory + '/bluebird/bluebird.js',
      ],
      css: [
        'http://localhost/firstMeshComponent/static/client.css',
        'http://localhost/anotherMeshComponent/static/client.css',
      ],
      ngApp: {
        name: 'templateS', // name of angular module to include into app
        templates: [
          'http://localhost/firstMeshComponent/static/client.html',
          'http://localhost/anotherMeshComponent/static/client.html',
        ]
      }
    }
  }
  ...

In the client:

NOTE: All scripts where load order matters should be in the package. Additional scripts called from the page will load out of order.

(/assets/js, /assets/css)

<html>
<head>
    <script src='/assets/js'></script>
    <link rel='stylesheet' type='text/css' href='/assets/css'></link>
</head>
<body ng-app='Demo' ng-view>
</body>
var app = angular.module('Demo', ['templateS'])
.directive('thing', [function() {
  return {
    templateUrl: '/firstMeshComponent/static/client.html',
                 // is preloaded in production mode via /assets/js package
    ...
  }
}]);

Production

NODE_ENV=production node myMesh.js

optional: DEBUG=happn* ...

In production mode the js, css are each compiled into single packages (minified, gzipped and cached in the browser)

Development (the default)

In development mode the scripts and css are all downloaded into the browser in their respective original unminified files.