Angular2 CLI ng build помещает все файлы в одну папку

Question

Я просто изучаю угловые кли. Я попытался построить свой проект с помощью следующей команды:

ng build

Он создает папку dist и помещает в нее все пакеты и индексный файл.

Я знаю, что мы можем указать outdir в angular-cli.json, и cli сгенерирует все пакеты и файл index.html в указанной папке.

Что мне нужно, так это то, что я хочу, чтобы файлы js были в комплекте:

/dist/js/ folder

и индексный файл в

/dist/ folder

Я попытался скопировать сгенерированные js-пакеты в папку dist/js и обновил пути в индексном файле, но это не сработало, и консоль показывает 404 для пакетов.

Еще один вопрос, команда ng build также генерирует файлы.gzip. Каково его назначение и как я могу использовать его в своем приложении?

Answer 1

Для этого нет возможности.

Одна из главных причин, по которой я могу скрыть конфигурацию Webpack, - оставить открытой возможность переноса из Webpack или использования некоторых функций в будущем. Раскрытие зависимости от внутренних инструментов сборки для конечных пользователей - это проверенный путь к бесконечным трудностям.

Смотрите здесь

Редактировать:

Вы можете достичь этого, используя глоток.

после 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"
}