2

私はAngular cliを調査しています。次のコマンドでプロジェクトをビルドしようとしました：

ng build

フォルダ dist を作成し、そこにすべてのバンドルとインデックス ファイルを配置します。

angular-cli.json で outdir を指定すると、cli は指定されたフォルダーにすべてのバンドルと index.html ファイルを生成することがわかっています。

必要なのは、バンドルされた js ファイルを次の場所に配置することです。

/dist/js/ folder

およびインデックスファイル

/dist/ folder

生成された js バンドルを dist/js フォルダーにコピーして、インデックス ファイルのパスを更新しようとしましたが、機能せず、コンソールにバンドルの 404 が表示されます。

もう 1 つの質問ですが、ng build コマンドは .gzip ファイルも生成します。その目的とアプリでの使用方法を教えてください。

4

1 に答える 1

-1

そのための可能な方法はありません。

Webpack 構成を非表示にしておく最大の理由の 1 つは、Webpack から移行するか、将来的にいくつかの機能を引き継ぐオプションを開いたままにしておくことです。内部のビルド ツールへの依存関係をエンド ユーザーに公開することは、際限のない困難への道であることが証明されています。

こちらをご覧ください

編集：

これは、gulp を使用して実現できます。

ng ビルド後、このgulpfile.jsを使用します

var gulp = require('gulp'),
  mkdirp = require('mkdirp'),
  clean = require('gulp-clean'),
  replace = require('gulp-replace');

gulp.task('default', [], function () {
  mkdirp('./dist/images', function (err) {
    if (err) {
      console.error(err);
      return false;
    } else {
      gulp.src('./dist/**.{png,jpg,jpeg,gif,svg}')
        .pipe(gulp.dest('./dist/images'));
      gulp.src('./dist/**.{png,jpg,jpeg,gif,svg}')
        .pipe(clean());
    }
  });

  mkdirp('./dist/fonts', function (err) {
    if (err) {
      console.error(err);
      return false;
    } else {
      gulp.src('./dist/**.{woff,woff2,eot,ttf}')
        .pipe(gulp.dest('./dist/fonts'));
      gulp.src('./dist/**.{woff,woff2,eot,ttf}')
        .pipe(clean());
    }
  });

  mkdirp('./dist/js', function (err) {
    if (err) {
      console.error(err);
      return false;
    } else {
      gulp.src('./dist/**.{bundle.js,bundle.map,js.gz}')
        .pipe(replace(/"([a-z0-9]+)\.(ttf|woff|woff2|eot)"/g, '"..\/fonts\/$1\.$2"'))
        .pipe(replace(/"([a-z0-9]+)\.(jpg|jpeg|png|svg)"/g, '"..\/images\/$1\.$2"'))
        .pipe(gulp.dest('./dist/js'));
      gulp.src('./dist/**.{bundle.js,bundle.map,js.gz}')
        .pipe(clean());
    }
  });

  gulp.src('./dist/index.html')
    .pipe(replace(/src="([a-z0-9]+)\.bundle\.js"/g, 'src="js\/$1\.bundle\.js"'))
    .pipe(gulp.dest('./dist/.'));

});

ng build -prodの後、このgulpfile.prod.jsを使用します

var gulp = require('gulp'),
  mkdirp = require('mkdirp'),
  clean = require('gulp-clean'),
  replace = require('gulp-replace');

gulp.task('default', [], function () {
  mkdirp('./dist/images', function (err) {
    if (err) {
      console.error(err);
      return false;
    } else {
      gulp.src('./dist/**.{png,jpg,jpeg,gif,svg}')
        .pipe(gulp.dest('./dist/images'));
      gulp.src('./dist/**.{png,jpg,jpeg,gif,svg}')
        .pipe(clean());
    }
  });

  mkdirp('./dist/fonts', function (err) {
    if (err) {
      console.error(err);
      return false;
    } else {
      gulp.src('./dist/**.{woff,woff2,eot,ttf}')
        .pipe(gulp.dest('./dist/fonts'));
      gulp.src('./dist/**.{woff,woff2,eot,ttf}')
        .pipe(clean());
    }
  });

  mkdirp('./dist/js', function (err) {
    if (err) {
      console.error(err);
      return false;
    } else {
      gulp.src('./dist/**.{bundle.js,bundle.map,js.gz}')
        .pipe(gulp.dest('./dist/js'));
      gulp.src('./dist/**.{bundle.js,bundle.map,js.gz}')
        .pipe(clean());
    }
  });

  mkdirp('./dist/css', function (err) {
    if (err) {
      console.error(err);
      return false;
    } else {
      gulp.src('./dist/**.css')
        .pipe(replace(/url\(([a-z0-9]+)\.(ttf|woff|woff2|eot)(\?#[a-z0-9_-]+)?\)/g, 'url(..\/fonts\/$1\.$2$3)'))
        .pipe(replace(/url\(([a-z0-9]+)\.(jpe?g|png|svg)(#[a-z0-9_-]+)?\)/g, 'url(..\/images\/$1\.$2$3)'))
        .pipe(replace(/sourceMappingURL=(\w+)\.([a-z0-9]+)\.bundle\.map/g, 'sourceMappingURL=../js\/$1\.$2\.bundle\.map'))
        .pipe(gulp.dest('./dist/css/.'));
      gulp.src('./dist/**.css')
        .pipe(clean());
    }
  });

  gulp.src('./dist/index.html')
    .pipe(replace(/href="(\w+)\.([a-z0-9]+)\.bundle\.css"/g, 'href="css\/$1\.$2\.bundle\.css"'))
    .pipe(replace(/src="(\w+)\.([a-z0-9]+)\.bundle\.js"/g, 'src="js\/$1\.$2\.bundle\.js"'))
    .pipe(gulp.dest('./dist/.'));
});

このジョブの package.json ファイルに npm スクリプトを追加することもできます。

scripts: {
    .
    .
    "build": "ng build && gulp",
    "bprod": "ng build -prod && gulp --gulpfile gulpfile.prod.js"
}
于 2016-12-19T14:11:12.070 に答える