web-dev-qa-db-ja.com

angle-cli（angular 2の場合）にcssの縮小バージョンを生成するように指示する方法はありますか？

タイトルにあるように、「ng serve」を実行すると、angular-cliは通常のCSSを生成しますが、縮小版を取得する予定です。 angle-cli-buildに使用する特定の設定、またはインストールして使用する追加のプラグインはありますか？

これは私のangle-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'
    ]
  });
};
cssangularangular-cli
21
Donovant

使用できます

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

または

ng serve --prod

ファイルハッシュを縮小して追加します。

  • --prodは、ハッシュとgzipを縮小するように指示します。
  • --env=prodは、prod環境定数ファイルを使用するように指示します。

これは次のようになります

40
James

Jamesのコマンドは、ng serve --prodを使用していても機能し、縮小します。

ただし、Chromeで次のようなメッセージが表示され、混乱する場合があります。

enter image description here

それは縮小されたようには見えません！

もっと注意深く見ると、プリティプリント機能が有効になったことを示すjs:formattedが表示されます。

URL http://localhost:4200/main.5082a3da36a8d45dfa42.jsを新しいタブで直接開くと、CLIが実際に完全に縮小していることがわかりました。

{}アイコンをクリックしてこの機能をオフにすることもできますが、コードがきれいに印刷されると消えるので、ページをリロードしてすぐにクリックする必要があるかもしれません。

enter code here

2
Simon_Weaver