We Keep Coding

How to use Bundler and Minifier in deployable web applications and installer projects

This is about how to use Visual Studio 2017 with both Bundler and Minifier and also the "Visual Studio Installer Projects" extension.
My web app has only one main page, so the <script> tags are all there on one ASPX page, about 40 of them as there are 40 JS files. When I run bundler and minifier, I want one script tag to point to the bundled and minified JS which is now in one file (and CSS is also bundled from 7 files to one)
When running in release mode I want to use the bundled and minified version so its a simulation of what will be running when live.
When running in debug mode I want to use the unbundled files so I can debug the javascript in the IDE and see the CSS in f12 etc.
I think this means that my one page, a.aspx, has to have two versions ?
When building using the installer projects extension, I want to build only in release mode and that would be using the single bundled JS and CSS files, I don't want the other uncompressed javascript and CSS files shipping in the project even though I want them there when debugging.
How do we go about setting up a project to achieve this ? Is it even possible ? or do people write code to copy out the projects and edit the project files before compilation ?
thanks in advance

Meteor build packages not included

I am currently trying to generate native versions of a small meteor app I built. When I run them on iOS or Android via the meteor run command it works and meteor build with --debug also generates an ipa/apk that works as expected. But when I run meteor build without --debug the web view only shows a white screen. Using remote debugging I noticed an injector error. I was wondering why and checked the apk/ipa content. There I recognized that in the debug version under assets/www/application/packages there is a bunch of .js and .js.map files which simply is not there in the non-debug ipa/apk.
In the index.html of the non-debug ipa/apk the imports of these files are also missing.
How can I tell meteor to just copy these obviously required files for non-debug?

When you build, Meteor concatenates and minifies all the JS files into a single bundle, same as Browserify and webpack are doing. That is why you do not see all the script imports.
It does not do it in debug to facilitate live reload / hot code push while you are developing, besides facilitating debugging​ obviously.
See the Meteor guide on building for production.
If you believe this difference causes some issue, you can simulate it in development using the --production flag after meteor run.
This addresses your titled and last question, but may not fix in itself your initial issue.

How a deployed aurelia web application differs than an application that runs locally on gulp

Is there an article that describes how a deployed aurelia web application differs than an application that runs locally on gulp. This must be a general question that applies not only to aurelia. There is a js library that I'm using that hangs the browser. That never happens when I run the app locally which makes me think that there is something really different that the deployed app does not have.

You are correct, this is not so much Aurelia specific, but build-tool specific. When you run your app locally, you will be using npm dependencies that are installed in /node_modules directory and resources from local file system (like CSS, images etc). When you bundle your application for deployment you need to bundle everything needed to run the app (including dependencies and resources).
For every bundler you can configure what to bundle and create different bundles. There are good explanations on how to bundle for both Aurelia CLI project (bundle configuration is in aurelia_project/aurelia.json) and JSPM project (bundle configuration is in bundle.js).
Just make sure that all necessary files and modules are bundled. Often the problem is not with bundling itself, but stuff that cannot be bundled. There are some very stubborn libraries (eg some assets of Bootstrap or some jQuery-based plugins) that will not work when bundled. Then you need to include them in deployment separately. In JSPM configuration it means you will have to export them together with bundles. Export basicly means "select all files that will be used to run the app in production" and those files are going to be copied to /export directory in case of JSPM. In CLI installation you will need to add copyFiles section to aurelia.json to export extra files.
Check this article on how bundling exactly works and this one to understand what is the role of aurelia-bundler in the process (hint: aurelia-bundler is a part of framework that creates ready-to-use Gulp tasks for you).

Loading modules in qooxdoo desktop (browser environment)

I'm struggling how to integrate client-side modules like - just as an example - Apollo Client
into the qooxdoo-specific generate.py workflow so that they become available in the browser.
According to the installation notes:
To use this client in a web browser or mobile app, you'll need a build system capable of loading NPM packages on the client. Some common choices include Browserify, Webpack, and Meteor 1.3. [...]
Side note: I currently use Babel 6 to recursively transpile all my sources from a separate folder source.es6/ into the "official" source/ folder, which is then watched and processed by generate.py. Is it possible to use this somehow as a solution to my question?
OTOH, I would love to see at least some kind of integration with Webpack, Browserify or SystemJS.

I suggest you do the following. First, create a loadable package(s) from the Apollo Client and its dependencies, e.g. using Webpack. Then make sure these package(s) are loaded in your web page before you load your qooxdoo app. Then the Apollo API is available to your qooxdoo code.
If you choose to deploy the Apollo packages with <script> tags you can let generate.py do that by using the add-script config key.
I suggest you place the output of the Webpack run in your qooxdoo project's resource path and add #asset hints for those files in your main qooxdoo class. This will make sure they are copied into the build version of your app, and you can use the relative URI to these files, either in your index.html directly or in the add-script config settings.
I don't think your transpiling with Babel6 will help here. The Apollo code is already consumable and you woudn't want to disect it and make it part of your qooxdoo (es6) source tree, let alone its dependencies. I would rather treat it as a shrink-wrapped JS library as I described that is added like a resource.

How do front end devs bundle and minify files?

What's the best practice for minifying and bundling js/css in a pure front end app, and how do the tools work?
I know how this can be done with server side apps like .NET/Java/LAMP/etc. But what about pure front end projects, SPA projects or backendless projects that are built with say, ember or angular these days? Say your entire project consists of HTML/css/js, which interfaces with a RESTful service elsewhere.
What kind of process or tool do you use to minify and bundle the resources for that?
I've seen grunt plugins that exist for this, but I find the documentation to be pretty magical and it's still unclear to me how they work.
Specifically, does the tool:
1) Replace src="/js/a.js",src="/js/b.js" with src="/js/bundle-a+b.min.js"? (and likewise with css?) in the source html files?
2) have different modes for dev and release, or is the tool only run when the project is released?
Or are the resource requests entirely managed by a js tool and js/css files have to be requested via a library function? Wouldn't the lag be noticeable in this case?
Thanks.

Through the use of Build tools front end devs can have minified javascript, css, or even images and html files automatically minified as they develop. The most common is grunt, with gulp close behind.
You configure grunt tasks, like grunt-contrib-uglify and grunt-contrib-copy, and put those tasks under a grunt-contrib-watch task. Have the grunt watch task watch the files you modify, and every time a change is detected those .min files are automatically generated.
These build tools have no impact on your application, they are run before the files are servered. You were correct to assume there was an easy way to do this. I suggest you look at grunt getting started, a sample gruntfile, or a project that uses grunt - here's mine, it does minification like you requested. Clone my repo, run sudo npm install, then sudo grunt. I don't have watch set up in my project but grunt is very well documented.