web-dev-qa-db-fra.com

Est-il possible de dire à angular-cli (pour angular 2) de générer une version simplifiée de CSS

Comme le titre l'indique, lorsque je lance "ng serve", angular-cli génère des css normaux alors que je m'attends à obtenir la version simplifiée . Existe-t-il un paramètre spécifique à utiliser pour angular-cli-build ou un plug-in supplémentaire à installer et utilise?

C'est mon angular-cli-build.js

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'
    ]
  });
};
cssangularangular-cli
20
Donovant

Vous pouvez utiliser

# --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');
5
Jeremy Chanteperdrix
ng build --prod --env=prod

ou

ng serve --prod

Minify et ajouter un hachage de fichier pour vous.

  • le --prod lui dit de minifier le hachage et gzip.
  • le --env=prod lui indique d'utiliser votre fichier de constantes d'environnement prod.

qui ressemblerait à ceci

39
James

Les commandes de James fonctionnent et DOIT être réduites même pour ng serve --prod. 

Mais je voyais les éléments suivants dans Chrome pour un tout nouveau projet ng new et le fichier js n’était à l’évidence pas minimisé:

 enter image description here

En regardant de plus près, j'ai vu js:formatted, indiquant que la jolie fonction d'impression était activée.

Ouvrir l’URL http://localhost:4200/main.5082a3da36a8d45dfa42.js directement dans un nouvel onglet m’a montré que la CLI était en train de la minimiser.

Vous pouvez cliquer sur l'icône {} pour désactiver cette fonctionnalité, mais elle semble aimer disparaître une fois le code imprimé. Vous devrez peut-être recharger la page et essayer de cliquer rapidement.

 enter code here

0
Simon_Weaver