web-dev-qa-db-de.com

Gibt es eine Möglichkeit, angle-cli (für angle 2) mitzuteilen, um eine reduzierte Version von css zu erstellen?

Wie der Titel besagt, erzeugt der Befehl "ng serve" normale css, wenn ich "ng serve" ausführen möchte. Ich erwarte jedoch, dass die reduzierte Version verfügbar ist. Gibt es eine bestimmte Einstellung für den "angle-cli-build" oder ein zusätzliches Plugin für die Installation? und verwenden?

Dies ist mein eckig-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'
    ]
  });
};
20
Donovant

Sie können verwenden

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

oder

ng serve --prod

Will minimieren und einen Datei-Hash für Sie hinzufügen.

  • der --prod sagt ihm, Hash zu minimieren und gzip.
  • der --env=prod weist ihn an, die Konstantendatei der Produktumgebung zu verwenden.

was würde so aussehen

39
James

James 'Befehle funktionieren und DO minify selbst für ng serve --prod

Ich habe jedoch in Chrome für ein brandneues ng new-Projekt Folgendes gesehen und die js-Datei wurde sicherlich nicht minimiert:

 enter image description here

Bei genauerem Hinsehen sah ich js:formatted, dass die hübsche Druckfunktion aktiviert war.

Das Öffnen der URL http://localhost:4200/main.5082a3da36a8d45dfa42.js direkt in einem neuen Tab zeigte mir, dass die CLI sie tatsächlich minimierte.

Sie können auf das {}-Symbol klicken, um diese Funktion zu deaktivieren. Sie scheint jedoch nach dem Ausdrucken des Codes nicht mehr angezeigt zu werden. Daher müssen Sie möglicherweise die Seite neu laden und versuchen, schnell darauf zu klicken.

 enter code here

0
Simon_Weaver