Is there any way to tell angular-cli (for angular 2) to generate minified version of css?

ng build --prod --env=prod

or

ng serve --prod

Will minify and add a file hash for you.

• the --prod tells it to minify hash, and gzip.
• the --env=prod tells it to use your prod environment constants file.

which would look like this

You can use

# --env=<your_env>
# --no-sourcemap
# minify => ./minify.js
ng build --env=prod --no-sourcemap && node minify

minify.js

// npm i --save-dev minifier fs-jetpack

const jetpack = require('fs-jetpack');
const path = require('path');
const minifier = require('minifier');

const files = jetpack.list(path.join(__dirname, 'dist'));

console.log(files);

for (const file of files) {
  if (/.*(\.js|\.css)$/g.test(file)) {
    console.log(`Start ${file}`);
    const filePath = path.join(__dirname, 'dist', file);
    minifier.minify(filePath, {output: filePath});
  }
}

console.log('End');

James' commands DO work and DO minify even when using ng serve --prod.

However you may see something like the following in Chrome and get confused:

That doesn't look minified does it!

Look more carefully and you'll see js:formatted indicating that the pretty print feature was enabled.

Opening the URL http://localhost:4200/main.5082a3da36a8d45dfa42.js directly in a new tab showed me that the CLI was indeed minifying it fully.

You can click the {} icon to turn this feature off, but it seems to like to disappear once the code has been pretty printed so you may need to reload the page and click it quickly.