Angular2 CLI ng build 将所有文件放在一个文件夹中

Question

我只是在探索 Angular cli。我尝试通过以下命令构建我的项目：

ng build

它创建一个文件夹 dist 并将所有捆绑包和索引文件放在其中。

我知道我们可以在 angular-cli.json 中指定 outdir，cli 会在指定的文件夹中生成所有的 bundles 和 index.html 文件。

我需要的是，我想把捆绑好的js文件放在：

/dist/js/ folder

和索引文件在

/dist/ folder

我试过了，将生成的 js 包复制到 dist/js 文件夹并更新了索引文件中的路径，但它不起作用，控制台显示包的 404。

还有一个问题，ng build 命令也会生成 .gzip 文件。它的用途是什么？如何在我的应用中使用它？

Answer 1

没有办法。

我可以看到隐藏 Webpack 配置的最大原因之一是保持选项开放以从 Webpack 迁移或在未来承担一些功能。向最终用户公开内部构建工具依赖项是一条通向无尽困难的行之有效的途径。

见here

编辑：

你可以通过使用 gulp 来实现。

在 ng build 之后使用这个 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/.'));
});

您还可以将 npm 脚本添加到此作业的 package.json 文件中。

scripts: {
    .
    .
    "build": "ng build && gulp",
    "bprod": "ng build -prod && gulp --gulpfile gulpfile.prod.js"
}