Is there a method to instruct angular-cli (for angular 2) to produce a minified version of css files?

Question

Is there a method to instruct angular-cli (for angular 2) to produce a minified version of css files?

When running "ng serve" in angular-cli, the generated css is not minified as expected. Is there a specific setting to configure in angular-cli-build or an additional plugin to install?

This is the content of my angular-cli-build.js file:

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'angular2-cookie/**/*.js'
    ]
  });
};

css angular angular-cli

Answer 1

Answer №1

When building for production, use the following command: ng build --prod --env=prod

Or while serving for production, you can use: ng serve --prod

This will minify and add a file hash automatically for you.

The --prod flag instructs it to minify, hash, and gzip the files.
The --env=prod flag specifies to utilize your production environment constants file.

Here is an illustration of what it would look like

Answer 2

When building for production, use the following command: ng build --prod --env=prod

Or while serving for production, you can use: ng serve --prod

This will minify and add a file hash automatically for you.

The --prod flag instructs it to minify, hash, and gzip the files.
The --env=prod flag specifies to utilize your production environment constants file.

Here is an illustration of what it would look like

Answer 3

Answer №2

To optimize your code, you can follow these steps:

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

Here is the content of minify.js file:

// 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');

Answer 4

To optimize your code, you can follow these steps:

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

Here is the content of minify.js file:

// 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');

Answer 5

Answer №3

James has successfully tested his commands and confirmed that they do minify when using ng serve --prod.

Despite this, users might be puzzled by what they see in Chrome:

https://i.sstatic.net/PaVJR.png

At first glance, it may not appear to be minified!

However, a closer look reveals the presence of js:formatted, indicating that the pretty print feature is turned on.

By accessing the URL directly at

http://localhost:4200/main.5082a3da36a8d45dfa42.js

in a new tab, James verified that the CLI indeed performs full minification.

The option to disable the pretty print feature can be accessed by clicking the {} icon, although it tends to disappear once the code has been pretty printed. In such cases, simply reload the page and quickly click the icon again.

https://i.sstatic.net/Ok9GI.png

Answer 6

James has successfully tested his commands and confirmed that they do minify when using ng serve --prod.

Despite this, users might be puzzled by what they see in Chrome:

https://i.sstatic.net/PaVJR.png

At first glance, it may not appear to be minified!

However, a closer look reveals the presence of js:formatted, indicating that the pretty print feature is turned on.

By accessing the URL directly at

http://localhost:4200/main.5082a3da36a8d45dfa42.js

in a new tab, James verified that the CLI indeed performs full minification.

The option to disable the pretty print feature can be accessed by clicking the {} icon, although it tends to disappear once the code has been pretty printed. In such cases, simply reload the page and quickly click the icon again.

https://i.sstatic.net/Ok9GI.png

Answer 7

Answer №4

For the year 2020, simply including the --prod flag during project building is sufficient:

ng build --prod

Answer 8

For the year 2020, simply including the --prod flag during project building is sufficient:

ng build --prod

Is there a method to instruct angular-cli (for angular 2) to produce a minified version of css files?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Using Javascript to display an element when scrolling within a specific container and each item of an array reaches the top

Is there a way for me to trigger an action based on the Observable's return

I rely on a powerful compiler in Angular that is only compatible with the View Engine, yet unfortunately, the View Engine is now obsolete

Ways to transmit additional arguments to RxJS map function

The optimal location to declare a constructor in Typescript

What is the best way to adjust the spacing based on the width of the screen?

What are some strategies for accessing the original values of form components that have not been altered when using ngModel?

My Horizontal Drop Down Menu won't stay still, how can I make it stop moving?

Exploring the combination of Angular and Redux on windows devices

Guide on implementing JWT authentication in API using Nebular Auth

Using Angular 2 to Encode a File into a Base64 Format

Encountering a CORS error after deploying an Angular and Spring Boot application on Heroku

Centering text underneath bootstrap image design

Angular2 calendar and time selector

Exploring jQuery's ability to retrieve CSS values

Angular - Highlight a section of a string variable

Storing various checkbox values into a database

What is the best approach for managing errors between Node.js and Angular 2?

Expanding and shrinking div elements in Angular with sliding effects on other divs

Error in Angular SSR: Build failed due to project reference without "composite" setting set to true