Impossible to minify other than production

Ember CLI
1

Hi there,

I’m trying to minify my js/css in other environments than production. I’ve read this: Development mode, why minify and pack? I’ve also tried that: Asset compilation - Advanced use - Ember CLI Guides (which is basically the same)

However, when I do ember build --environment=whatever (where whatever is not production), it doesn’t minify anything.

Why is that?

Thanks

2

We do something like this and it seems to work ok though I haven’t actually checked really recently:

In ember-cli-build.js:

// get environment
var env = EmberApp.env();
// if we are building for a production environment turn minification on
if(env.indexOf('prod') > -1) {
  app.options.minifyCSS.enabled = true;
  app.options.minifyJS.enabled = true;
}
3

Sorry, I didn’t see your message earlier, didn’t get the notification.

This doesn’t solve the issue for me. It’s impossible for me to minify builds with any command other than ember build --environment=production.

4

Hmmmmm what version of Ember are you on, and what does your ember-cli-build.js look like?

5 
$ ember -v
ember-cli: 2.9.1
node: 6.9.1
os: darwin x64

I just did a brand new install of ember for a new project and wanted to give this a new try, so I don’t have a lot of customization of anything.

My ember-cli-build.js looks like this:

/*jshint node:true*/
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    minifyJS: {
      enabled: true
    },
    minifyCSS: {
      enabled: true
    }
  });

  app.import('app/styles/style.css');

  return app.toTree();
};

Then I try to run something like ember build --environment=whatever. It builds, but I don’t get any minification.

6

How are you verifying that minification is not enabled?

I tried your config in an (almost) brand new app that I’ve been playing with, same version of Ember CLI (2.9.1) and minification seems to work fine. I verified this by running a build (in my case i did it with ember serve -e other) and then opening <project-root>/dist/vendor.js and <project-root>/dist/<appname>.js and they are minified as expected. If i remove that config they are not minified.

You’ll probably notice that the app source is still explorable in the ‘source’ tab of the Chrome (or other browser) dev tools. To disable that I think you’ll want to turn sourcemaps off:

  var app = new EmberApp(defaults, {
    minifyJS: {
      enabled: true
    },
    minifyCSS: {
      enabled: true
    },
    sourcemaps: {
      enabled: false
    }
  });
7

Very simple: when everything is minified, I get an output like this.

$ ember build --environment=production
bootstrap-sassy config: all JS enabled, glyphicons enabled
cleaning up...
Built project successfully. Stored in "dist/".
File sizes:
 - demo-1208aea6cf3c124868f73fbf78cd7b93.js: 613 B (334 B gzipped)
 - demo-b4aa5e9138764f35037f1d3490616bf9.css: 1.47 KB (663 B gzipped)
 - style-045a666e4a8dd115ef4b919501a15212.css: 26.73 KB (6.1 KB gzipped)
...

and css/js files in dist/ are minified.

Otherwise

$ ember build --environment=staging
bootstrap-sassy config: all JS enabled, glyphicons enabled
cleaning up...
Built project successfully. Stored in "dist/".

and css/js files in dist/ are not minified.

9

This is really irritating. Did you find a workaround for this? My use case is this: I need to be able to deploy something that’s production-ready (minified, same exact environment as the actual production site), but point to different staging API hosts. Originally I used the environment variable for that, but I lose minification and other optimizations (I also miss the action behavior that comes with a production environment).

It seems like the way forward is to use other environment variables for that: API_ENVIRONMENT=staging ember build --environment=production, or something similar

10

Yeah environment variables are recommended. Easiest way to manage this is probably to use ember-cli-deploy which lets you define deploy targets and you can specify which ember build environment you use per target.

The problem is that ember-cli (by design) only supports the basic build environments: testing, development, production. Others will “work” but they’ll basically just default to your ember-cli default build type.

1 Like
11

This is actually not correct anymore in the docs, I believe. You can enable minification like this, in newer versions of ember-cli:

let app = new EmberApp(defaults, {
  minifyCSS: { enabled: isProductionLikeBuild },
  'ember-cli-uglify': {
    enabled: isProductionLikeBuild
  }
});
12

An underlying confusion here is that --environment=production doesn’t mean “build it for my production server” it means “build it for any server”. If you have a production server and a staging server, those are both still --environment=production builds, and the differences between them can be managed easiest using different deploy targets under ember-cli-deploy.

--environment only has three possible settings: development (“I will run it locally”), test (“I will run the test suite”), and production (“I will run it on a server”). You can’t make up extra settings like “staging”.

It’s unfortunate that this flag is named “environment” when something like “mode” might make it clearer how it works.

2 Likes