有没有办法告诉angular-cli(for angular 2)生成缩小版的css？

Question

正如标题所说,当我运行"ng serve"时,angular-cli会产生正常的css,而我希望得到缩小的版本.是否有任何特定的设置用于angular-cli-build,或者一些额外的插件来安装和使用？

这是我的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'
    ]
  });
};

Answer 1

ng build --prod --env=prod

要么

ng serve --prod

将为您缩小并添加文件哈希.

• 在--prod告诉它来缩小哈希,和gzip.
• 在--env=prod告诉它使用您的督促环境常数文件.

看起来像这样

Answer 2

您可以使用

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