Jaki jest dobry system budowy dla projektów Angular2? - kątowe, kompilacja, grunty, łyk

Ja i mój zespół ostatnio zmieniliśmy na Angular2 (lub AngularJS 2) z AngularJS 1.x. Kiedyś używaliśmy Yeoman Angular Generator do rusztowań i grunt do budowania i tworzenia wojny za pomocą wbudowanego gruntfile.js który był domyślnie tworzony z wyżej wspomnianym generatorem. Wykorzystaliśmy go, wprowadzając drobne zmiany i dobrze było iść.
Zasadniczo ten plik to:

• Łączy on wszystkie zainstalowane przez siebie pliki zależności od innych firm package.json w node_modules folder (np. npm install) i opcjonalnie nawet od bower.json w bower_components folder (tj. bower install) [jeśli używasz go] w jedno vendor.js plik (robi to przez konkatenację, minifikację i drażnienie)
• Powtarza powyższe kroki dla plików css i łączy je w vendor.css
• Łączy w sobie wszystkie pliki javascript użytkownika scripts.js i pliki css w styles.css
• W zestawie te 4 pliki z index.html i inne niezbędne rzeczy, takie jak obrazy, czcionki itp.

Szukałem podobnego rozwiązania dla Angular2, ale jak dotąd nie udało się. Próbowałem użyć gulp używając gulpfile.js znalezione w projekt dotyczący kąta nasłonecznienia lub ng build od projekt kątowy-cli ale żaden nie dostarczył takiego rozwiązania. Problem zawsze występuje w folderze node_modules. Maszynopis ts pliki z tych folderów, które są całkowicie niepotrzebne, zostają wbudowane w pakiet.

Teraz rozumiem, że Angular2 jest innyod Angular1 i wszystkich, ale w jaki sposób można zbudować dobrą konstrukcję? Jakie podejście powinienem przyjąć? Czy mogę osiągnąć coś takiego, jak kiedyś w Angular1?

Odpowiedzi:

Więc jeśli użyjesz łyka, który jest fantastycznym narzędziem, jeśli mnie zapytasz :-), to ta konfiguracja dla pliku łyku zadziałałaby.

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!

Pamiętaj, aby edytować ścieżki docelowe.

Właśnie dodałem obsługę altan. Ale jeśli chodzi o moduły węzłów, wystarczy zachować plik package.json, a następnie uruchomić instalację npm, gdy potrzebne są moduły.

Aby połączyć wszystkie moduły węzłów i elementy altanowania, potrzebny będzie zestaw pakietu gulp.

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