2.0.1 Final using Gulp (TypeScript - Target: ES5)

OneTime Setup

• W przypadku, gdy Directory jest projectFolder, uruchamiamy go w cmd.]}

Schody Wiązane

• npm run bundle (Uruchom w cmd, gdy Directory jest projectFolder)

  pakiety są generowane do projectFolder / bundles /

Wyjście

• bundles/dependencies.bundle.js [ Rozmiar: ~ 1 MB (jak najmniejszy) ]
  • Zawiera rxjs i zależności kątowe, a nie całe frameworki
• bundles/app.bundle.js [ rozmiar: zależy od Twojego projektu , Mój to ~ 0.5 MB ]
  • Zawiera Twój projekt

Struktura Pliku

• Wszystkie komponenty, dyrektywy, szablony itp.]}
• projectFolder / gulpfile.js

var gulp = require('gulp'),
  tsc = require('gulp-typescript'),
  Builder = require('systemjs-builder'),
  inlineNg2Template = require('gulp-inline-ng2-template');

gulp.task('bundle', ['bundle-app', 'bundle-dependencies'], function(){});

gulp.task('inline-templates', function () {
  return gulp.src('app/**/*.ts')
    .pipe(inlineNg2Template({ useRelativePaths: true, indent: 0, removeLineBreaks: true}))
    .pipe(tsc({
      "target": "ES5",
      "module": "system",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": true,
      "noImplicitAny": false
    }))
    .pipe(gulp.dest('dist/app'));
});

gulp.task('bundle-app', ['inline-templates'], function() {
  // optional constructor options
  // sets the baseURL and loads the configuration file
  var builder = new Builder('', 'dist-systemjs.config.js');

  return builder
    .bundle('dist/app/**/* - [@angular/**/*.js] - [rxjs/**/*.js]', 'bundles/app.bundle.js', { minify: true})
    .then(function() {
      console.log('Build complete');
    })
    .catch(function(err) {
      console.log('Build error');
      console.log(err);
    });
});

gulp.task('bundle-dependencies', ['inline-templates'], function() {
  // optional constructor options
  // sets the baseURL and loads the configuration file
  var builder = new Builder('', 'dist-systemjs.config.js');

  return builder
    .bundle('dist/app/**/*.js - [dist/app/**/*.js]', 'bundles/dependencies.bundle.js', { minify: true})
    .then(function() {
      console.log('Build complete');
    })
    .catch(function(err) {
      console.log('Build error');
      console.log(err);
    });
});

• projectFolder / pakiet.json (same w 2009 roku, w ramach projektu, w ramach projektu, stworzono nową wersję oprogramowania do tworzenia pakietów.]}

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    ***
     "gulp": "gulp",
     "rimraf": "rimraf",
     "bundle": "gulp bundle",
     "postbundle": "rimraf dist"
  },
  "license": "ISC",
  "dependencies": {
    ***
  },
  "devDependencies": {
    "rimraf": "^2.5.2",
    "gulp": "^3.9.1",
    "gulp-typescript": "2.13.6",
    "gulp-inline-ng2-template": "2.0.1",
    "systemjs-builder": "^0.15.16"
  }
}

• projectFolder / systemjs.config.js (tak samo jak Quickstart guide , nie jest już dostępny)

(function(global) {

  // map tells the System loader where to look for things
  var map = {
    'app':                        'app',
    'rxjs':                       'node_modules/rxjs',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    '@angular':                   'node_modules/@angular'
  };

  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'app/boot.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' }
  };

  var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/forms',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade',
  ];

  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
  packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

  var config = {
    map: map,
    packages: packages
  };

  // filterSystemConfig - index.asp's chance to modify config before we register it.
  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);

• projetcFolder / dist-systemjs.config.js (właśnie pokazałem różnicę z systemjs.config.json)

var map = {
    'app':                        'dist/app',
  };

• projectFolder / indeks.html (produkcja) - kolejność znaczników skryptu jest krytyczna. Umieszczenie znacznika dist-systemjs.config.js za znacznikami pakietu nadal umożliwiłoby uruchomienie programu, ale pakiet zależności byłby ignorowany, a zależności byłyby ładowane z folderu node_modules.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <base href="/"/>
  <title>Angular</title>
  <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>

<my-app>
  loading...
</my-app>

<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>

<script src="node_modules/zone.js/dist/zone.min.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>

<script src="dist-systemjs.config.js"></script>
<!-- Project Bundles. Note that these have to be loaded AFTER the systemjs.config script -->
<script src="bundles/dependencies.bundle.js"></script>
<script src="bundles/app.bundle.js"></script>

<script>
    System.import('app/boot').catch(function (err) {
      console.error(err);
    });
</script>
</body>
</html>

• projectFolder / app / boot.ts jest tam, gdzie jest bootstrap.

The best I could do yet :)

Angular 2 z Webpack (bez konfiguracji CLI)

1-tutorial zespołu Angular2

Stworzyłem i umieściłem pliki z tutoriala w małym projekcieGitHub seed . Możesz więc szybko wypróbować przepływ pracy.

Instrukcje :

• Npm install

• Npm start . Dla rozwoju. To stworzy wirtualny " dist" folder, który zostanie załadowany na twój adres localhost.

• Npm run build . Do produkcji. "Spowoduje to utworzenie fizycznej wersji folderu "dist", która może zostać wysłana na serwer WWW. Folder dist mA 7.8 MB, ale do załadowania strony w przeglądarce internetowej wymagane jest tylko 234kb.
  
  

2-Zestaw Startowy Webkit

Ten Webpack Starter Kit oferuje więcej funkcji testowych niż powyższy tutorial i wydaje się całkiem popularny.

Angular 2 workflow produkcji z SystemJs builder i gulp

Angular.io mieć szybki start samouczka. Skopiowałem ten tutorial i rozszerzyłem o kilka prostych zadań gulp do łączenia wszystkiego do folderu dist, który można skopiować na serwer i działać tak po prostu. Próbowałem zoptymalizować wszystko, aby działało dobrze na Jenkis CI, więc node_modules można buforować i nie trzeba ich kopiować.

Kod źródłowy z przykładową aplikacją na Github: https://github.com/Anjmao/angular2-production-workflow

1. Clean typescripts skompilowane pliki js i folder dist
2. Kompilowanie plików maszynopisu w folderze aplikacji
3. użyj SystemJs bundler, aby połączyć wszystko do folderu dist z wygenerowanymi hashami odświeżania pamięci podręcznej przeglądarki
4. użyj gulp-html-replace, aby zastąpić indeks.Skrypty html z dołączonymi wersjami i skopiuj do folderu dist
5. skopiuj wszystko w folderze assets do dist folder

Node: chociaż zawsze możesz stworzyć swój własny proces budowania, ale Gorąco polecam użycie angular-cli, ponieważ ma wszystkie potrzebne przepływy pracy i działa teraz doskonale. Używamy go już w produkcji i nie mamy żadnych problemów z angular-cli.

Kątowe CLI 1.x. x (działa z Angular 4.x. x, 5.x. x)

To wspiera:

• Angular 2.x i 4.x
• Najnowszy Webpack 2.x
• Angular AOT compiler
• Routing (normalny i leniwy)
• SCSS
• niestandardowe łączenie plików (aktywa)
[32]} dodatkowe narzędzia programistyczne (linter, unit & end-to-end Test setups)

Wstępna Konfiguracja

ng new project-name --routing

Możesz dodać --style=scss dla SASS .wsparcie scss.

Możesz dodać --ng4 do używania kątowego 4 zamiast kątowego 2.

Po utworzeniu projektu, CLI automatycznie uruchomi npm install dla Ciebie. Jeśli chcesz użyć Yarn zamiast tego, lub po prostu chcesz spojrzeć na szkielet projektu bez instalacji, sprawdź, jak to zrobić tutaj .

Klatka Schodowa

Wewnątrz folderu projektu:

ng build -prod

w bieżącej wersji należy ręcznie podać --aot, ponieważ może być używana w trybie deweloperskim (choć nie jest to praktyczne ze względu na powolność).

To również wykonuje kompilację AoT dla jeszcze mniejszych pakietów (bez kompilatora kątowego, zamiast tego generuje wyjście kompilatora). Pakiety są znacznie mniejsze z AoT, jeśli używasz Angular 4, ponieważ wygenerowany kod jest mniejszy.
Możesz przetestować swoją aplikację z AoT w trybie deweloperskim (sourcemaps, no minification) i AoT, uruchamiając ng build --aot.

Wyjście

Domyślnym katalogiem wyjściowym jest ./dist, chociaż można go zmienić w ./angular-cli.json.

Pliki

Wynik kroku budowania jest następujący:

• ./dist/assets
  Pliki skopiowane jako-jest z ./src/assets/**
• ./dist/index.html
  Z ./src/index.html, Po dodaniu do niego skryptów webpack
  Plik szablonu źródłowego można konfigurować w ./angular-cli.json
• ./dist/inline.js
  Small webpack loader / polyfill
• ./dist/main.<content-hash>.bundle.js
  Główna .plik js zawierający wszystkiegenerowane / importowane Skrypty js
• ./dist/styles.<content-hash>.bundle.js
  Gdy używasz Webpack loaderów dla CSS, który jest sposobem CLI, są one ładowane przez JS tutaj

W starszych wersjach tworzyła również wersje gzipped do sprawdzania ich rozmiaru i .map plików sourcemaps, ale to już się nie dzieje, ponieważ ludzie ciągle prosili o ich usunięcie.

Inne Pliki

W niektórych innych okazjach, możesz znaleźć inne niechciane pliki / foldery:

• ./out-tsc/
  Od ./src/tsconfig.json ' S outDir
• ./out-tsc-e2e/
  Od ./e2e/tsconfig.json ' s outDir
• ./dist/ngfactory/
  Od wersji beta 16 (nie można go skonfigurować bez rozwidlenia CLI)

Na dzień dzisiejszy nadal uważam Kompilacyjną książkę kucharską za najlepszy przepis na produkcję. Znajdziesz go tutaj: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

Moje dotychczasowe doświadczenie z Angular 2 polega na tym, że AoT tworzy najmniejsze buildy bez prawie żadnego czasu ładowania. A co najważniejsze - wystarczy przesłać kilka plików do produkcji.

To chyba dlatego, że kompilator kątowy nie będzie dostarczane wraz z kompilacjami produkcyjnymi, ponieważ szablony są kompilowane "z wyprzedzeniem". Bardzo fajnie jest również zobaczyć, jak znaczniki szablonu HTML przekształcają się w instrukcje javascript, które byłyby bardzo trudne do odwrócenia w oryginalny HTML.

Zrobiłem prosty film, w którym demonstruję rozmiar pobierania, liczbę plików itp. dla Angular 2 app w Dev vs AOT build-które można zobaczyć tutaj:

Https://youtu.be/ZoZDCgQwnmQ

Znajdziesz kod źródłowy użyty w film tutaj:

Https://github.com/fintechneo/angular2-templates

        **Production build with

         - Angular Rc5
         - Gulp
         - typescripts 
         - systemjs**

        1)con-cat all js files  and css files include on index.html using  "gulp-concat".
          - styles.css (all css concat in this files)
          - shims.js(all js concat in this files)

        2)copy all images and fonts as well as html files  with gulp task to "/dist".

        3)Bundling -minify angular libraries and app components mentioned in systemjs.config.js file.
         Using gulp  'systemjs-builder'

            SystemBuilder = require('systemjs-builder'),
            gulp.task('system-build', ['tsc'], function () {
                var builder = new SystemBuilder();
                return builder.loadConfig('systemjs.config.js')
                    .then(function () {
                        builder.buildStatic('assets', 'dist/app/app_libs_bundle.js')
                    })
                    .then(function () {
                        del('temp')
                    })
            });


    4)Minify bundles  using 'gulp-uglify'

jsMinify = require('gulp-uglify'),

    gulp.task('minify', function () {
        var options = {
            mangle: false
        };
        var js = gulp.src('dist/app/shims.js')
            .pipe(jsMinify())
            .pipe(gulp.dest('dist/app/'));
        var js1 = gulp.src('dist/app/app_libs_bundle.js')
            .pipe(jsMinify(options))
            .pipe(gulp.dest('dist/app/'));
        var css = gulp.src('dist/css/styles.min.css');
        return merge(js,js1, css);
    });

5) In index.html for production 

    <html>
    <head>
        <title>Hello</title>

        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="utf-8" />

       <link rel="stylesheet" href="app/css/styles.min.css" />   
       <script type="text/javascript" src="app/shims.js"></script>  
       <base href="/">
    </head>
     <body>
    <my-app>Loading...</my-app>
     <script type="text/javascript" src="app/app_libs_bundle.js"></script> 
    </body>

    </html>

 6) Now just copy your dist folder to '/www' in wamp server node need to copy node_modules in www.

Możesz wdrożyć aplikację angular na github używając angular-CLI-ghpages

Sprawdź link, aby dowiedzieć się, jak wdrożyć za pomocą tego cli.

Wdrożona strona będzie przechowywana w jakiejś gałęzi w github typowo

Gh-strony

Use może sklonować gałąź git i używać jej jak statycznej strony internetowej na serwerze

"najlepszy" zależy od scenariusza. Czasami zależy Ci tylko na najmniejszym możliwym pojedynczym pakiecie, ale w dużych aplikacjach możesz rozważyć leniwe Ładowanie. W pewnym momencie niepraktyczne staje się podawanie całej aplikacji jako jednego pakietu.

W tym drugim przypadku Webpack jest na ogół najlepszym sposobem, ponieważ obsługuje dzielenie kodu.

Za pojedynczy pakiet rozważyłbym Rollup, lub kompilator zamknięcia, Jeśli czujesz się odważny: -)

Stworzyłem sample z wszystkie Kątówki jakie tu używałem: http://www.syntaxsuccess.com/viewarticle/angular-production-builds

Kod można znaleźć tutaj: https://github.com/thelgevold/angular-2-samples

Wersja kątowa: 4.1.x

Po prostu skonfiguruj angular 4 z webpack 3 w ciągu minuty Twój Pakiet ENV rozwoju i produkcji będzie gotowy bez żadnego problemu po prostu postępuj zgodnie z poniższym github doc

Https://github.com/roshan3133/angular2-webpack-starter

Proszę spróbować poniżej polecenia CLI w bieżącym katalogu projektu. Utworzy pakiet folderów dist. możesz więc przesłać wszystkie pliki w folderze dist w celu wdrożenia.

Ng build --prod --AOT --base-href.

ng serve pracuje nad obsługą naszej aplikacji w celach rozwojowych. A co z produkcją? Jeśli przyjrzymy się naszej paczce.plik json, widzimy, że są skrypty, których możemy użyć:

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build --prod",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
},

skrypt kompilacji używa Angular CLI ' s ng build z flagą --prod. Spróbujmy teraz. Możemy to zrobić na dwa sposoby:

# korzystanie ze skryptów npm

npm run build

# korzystanie z cli bezpośrednio

ng build --prod

Tym razem dostajemy cztery pliki zamiast pięciu. Flaga --prod mówi Angular, aby nasza aplikacja była znacznie mniejsza.