Какво е добра система за изграждане на проекти за Angular2? - ъглово, изграждане, грунт, глътка

Аз и моят екип наскоро сменихме Angular2 (или AngularJS 2) от AngularJS 1.x. Използвахме го Йоман ъглова генератор за скелета и grunt за изграждане и създаване на война с помощта на вградения gruntfile.js който се използва за създаване по подразбиране с гореспоменатия генератор. Използвахме го, като направихме някои малки промени в него и ние бяхме добре да тръгваме.
Това, което правим по същество, е:

• Той съчетава всички инсталирани от трета страна файлове на js package.json в node_modules папка (т.е. npm install) и по избор дори от bower.json в bower_components папка (т.е.. bower install) [ако го използвате] в едно vendor.js файл (Това става чрез свързване, minification и uglification)
• Той повтаря горните стъпки за css файловете и ги комбинира в vendor.css
• Той комбинира всички файлове на javascript на потребителите scripts.js и css файлове в styles.css
• В пакети тези 4 файла с index.html и други необходими неща като изображения, шрифтове и др.

Търся подобно решение за Angular2, но досега не успях. Опитах да използвам gulp като се използва gulpfile.js намерен в ъглов проект за 2 семена или ng build от ъглово-клиен проект но никой не е предоставил такова решение. Проблемът винаги възниква при папката node_modules. Пишещата машина TS файлове от тези папки, които са напълно ненужни да се вграждат в пакета.

Сега разбирам, че Angular2 е различенот Angular1 и всички, но как може да се изгради добро изграждане от в това? Какъв подход трябва да предприема? И мога ли да постигна нещо като това, което използвах в Angular1?

Отговори:

Така че, ако използвате глътка, което е фантастичен инструмент, ако ме питате :-), тогава тази настройка за глупав файл ще работи.

const gulp = require("gulp");
const cleanCSS = require("gulp-clean-css");
const del = require("del");
const typescript = require("gulp-typescript");
const tscConfig = require("./tsconfig.json");
const bower = require("gulp-bower");

/*
Clean current builds
*/
gulp.task("clean", function () {
return del("dist/**/*");
});

/*
Pull in bower dependencies.
Uses default .bowerrc path
*/
gulp.task("bower", function() {
return bower();
});

//Use custom path
/*
gulp.task("bower", function() {
return bower("./my_bower_components")
.pipe(gulp.dest("lib/"))
});
*/

/*
Minify css
Remember to edit distination path
*/
gulp.task("minify-css", function() {
return gulp.src("styles/*.css")
.pipe(cleanCSS({debug: true}, function(details) {
console.log(details.name + ": " + details.stats.originalSize);
console.log(details.name + ": " + details.stats.minifiedSize);
}))
.pipe(gulp.dest("dist")); // Here
});


/*
Typescript compile
Remember to edit distination path
*/
gulp.task("compile", ["clean"], function () {
return gulp
.src("app/**/*.ts")
.pipe(typescript(tscConfig.compilerOptions))
.pipe(gulp.dest("dist/app")); // Here
});

gulp.task("build", ["compile", "minify-css", "bower"]);
gulp.task("default", ["build"]);

OBS!

Не забравяйте да редактирате пътищата за местоназначение.

Току-що добавих боравенето. Но когато става дума за възлови модули, просто трябва да пазите файла package.json и след това да изпълните npm инсталацията, когато са необходими модули.

За да свържете всички модули на възли и компоненти за часовниковата стрелка, ще ви е необходим комплект за сглобки за глупци.

https://www.npmjs.com/package/gulp-bundle-assets