有没有办法告诉 angular-cli（对于 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 告诉它使用您的 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

即使在使用 ng serve --prod 时，James 的命令确实有效并且确实缩小了。

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

看起来没有缩小是吧！

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

直接在新选项卡中打开 URL http://localhost:4200/main.5082a3da36a8d45dfa42.js 显示 CLI 确实完全缩小了它。

您可以单击 {} 图标关闭此功能，但它似乎会在代码打印完成后消失，因此您可能需要重新加载页面并快速单击它。

Answer 4

在 2020 年，在构建项目时使用 --prod 标志就足够了：

ng build --prod

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

Is there any way to tell angular-cli (for angular 2) to generate minified version of css?

css

angular

angular-cli