Packaging application - jasperjs/jasper-application GitHub Wiki

Packaging application_ - it's an operation which concatenates all application scripts, styles and templates to create a distributable application package, which ready to deploy on production.

During application development each Jasper component (components, decorators, services etc...) represents as separate script file. Components and pages also have a template html file. When you debug your application you wants that browser loads all this scripts separately, because you can fast navigate to specified scripts in dev tools:

But this situation is not suitable for work on production, because browser will make many requests to the server-side and application startup will more slowly. Packaging solves this problem by concatenating and minification all application's scripts, styles and templates.

Grunt task (grunt-jasper) finds all css files in your app folder, concatenates and minify them to dist/styles/all.min.css file. This file will be automatically referenced to index.html

All application scripts are divided into 2 groups:

1. Bootstrap scripts - scripts needs for bootstrap client application. These scripts are described in jasper.json file and you can customize it. Also grunt-jasper task will add to bootstrap scripts all scripts of areas, which marked as bootstrap. All bootstrap scripts will be minified to dist/scripts/_base.min.js. Also this script will be automatically referenced to index.html;
2. Area's scripts. Because area is't a separate part of application, that can be lazy loaded during runtime, grunt jasper will minify all scripts of area to separate .js file. Package areas scripts will be placed to dist/scripts/<AREA>.min.js file. Browser will loaded this scripts on demand.

Application has components (custom elements) and pages which has own template html files. To avoid load them separatly at production grunt-jasper will stringify templates and put them to area's scripts, like:

jsp.template('app/catalog/components/b-cart/b-cart.html','<div>Template of the component</div>');

This technique allows upload all client-side templates with scripts and speed-up application bootstrap.

After packaging application looks like: