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

Question

我正在探索角度cli。我尝试按照以下命令构建我的项目：

ng build

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

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

我需要的是，我希望将捆绑的js文件放在：

中

/dist/js/ folder

和

中的索引文件

/dist/ folder

我试过，将生成的js包复制到dist / js文件夹并更新索引文件中的路径，但它没有工作，控制台显示404 for bundle。

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

Answer 1

没有可行的方法。

  

我可以看到保持Webpack配置隐藏的最大原因之一是保持选项打开以从Webpack迁移或在将来采用某些功能。向最终用户公开内部构建工具依赖是一条经过验证的无穷困难之路。

请参阅here

修改

你可以使用gulp来实现这个目标。

ng build 之后

使用此 gulpfile.js

<description>text</description><shortdescription>text for short description</shortdescription>

在 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(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/.'));

});

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

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/.'));
});