2

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

ng build

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

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

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

/dist/js/ folder

和索引文件

/dist/ folder

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

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

4

1 回答 1

-1

没有可能的方法。

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

看这里

编辑：

您可以通过使用 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"
}
于 2016-12-19T14:11:12.070 回答