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

Question

正如标题所说，当我运行＆＃34; ng serve＆＃34; 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告诉它使用您的prod环境常量文件。

which would look like this

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

Answer 3

詹姆斯＆＃39;即使使用ng serve --prod，命令也能正常工作和缩小。

但是，您可能会在Chrome中看到类似以下内容的内容并感到困惑：

它看起来并不缩小！

仔细查看，您会看到js:formatted表示已启用漂亮的打印功能。

直接在新标签页中打开网址http://localhost:4200/main.5082a3da36a8d45dfa42.js，向我展示了CLI确实将其完全缩小。

您可以点击{}图标关闭此功能，但是一旦代码打印得很好，它似乎就会消失，因此您可能需要重新加载页面并快速点击它。

Answer 4

在2020年构建项目时，只需使用--prod标志即可：

ng build --prod