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

Posted 2023-03-06

【中文标题】有没有办法告诉 angular-cli (for angular 2) 生成缩小版的 css？

【英文标题】：Is there any way to tell angular-cli (for angular 2) to generate minified version of css?

【发布时间】：2016-12-10 08:03:39

【问题描述】：

正如标题所说，当我运行“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'
    ]
  );
;

【问题讨论】：

开发时为什么要得到一个缩小版？ （ng serve 旨在成为您开发应用程序时的开发工具）要获得应用程序的缩小版本，请运行 ng build --prod

谢谢伙计，我不知道，我的意思是我认为用最小的开发更好，但显然这需要更多时间

我在开发过程中需要它，这样我就可以跟踪我的应用程序有多大。我想运行ng new，然后运行ng serve --prod，然后查看文件的大小。我可能只做一次，但它比进行 dist 构建更容易，我什至不确定是否有办法为“dist”文件夹提供服务。

【参考方案1】：

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

ng build --prod

【参考方案2】：

即使在使用 ng serve --prod 时，James 的命令也可以工作并且可以缩小。

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

它看起来不像缩小了！

再仔细看，你会看到js:formatted表示启用了漂亮打印功能。

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

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

【讨论】：

这为我节省了大量时间。谢谢。 :)

【参考方案3】：

你可以使用

# --env=<your_env>
# --no-sourcemap
# minify => ./minify.js
ng build --env=prod --no-sourcemap && node 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');

【讨论】：

不鼓励仅使用代码回答，因为它们没有为未来的读者提供太多信息，请对您所写的内容提供一些解释

令牌“&&”在此版本中不是有效的语句分隔符

【参考方案4】：

ng build --prod --env=prod

或

ng serve --prod

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

--prod 告诉它缩小哈希和 gzip。 --env=prod 告诉它使用您的 prod 环境常量文件。

which would look like this

【讨论】：

这有点令人困惑，为什么需要同时指定--prod 和--env=prod？我注意到如果我忽略--prod，我会得到不同的输出。无论如何将 prod env 文件更新为实际上是 prod 并包含 --prod 命令？

最新的Angular documentation声明为了改变环境文件，使用--configuration=prod