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

Question

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

ng build 

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

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

Что мне нужно, я хочу, чтобы в комплекте JS файлы, которые будут размещены в:

/dist/js/ folder 

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

/dist/ folder 

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

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

Answer 1

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

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

См here

Edit:

Вы можете achive это с помощью глотка.

после нг построить использовать этот 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/.')); 

}); 

и после нг сборки -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" 
}