Czy ma być link do komponentów bower_icon w produkcji?

Question

Jestem względnie nowy w korzystaniu z Bower i nie mogę powiedzieć, czy powinieneś połączyć się z komponentami bower_icon w produkcji. Czy powinienem używać zadania pomruczkowego do łączenia lub kopiowania potrzebnych plików z katalogu bower_components do osobnego katalogu?

Pytam o to, ponieważ nigdy nie widziałem strony z katalogiem "bower_components", więc trochę się boję. Wszystkie przewodniki dla początkujących po prostu zawierają link do "bower_components/...", na przykład samouczek kątowy.

Answer 1

Czy używasz Yeoman?

zależności od Gruntfile.js trzeba mieć różne zadania, Jednym z nich jest „altana-install”: To zadanie będzie czytać ty index.html, znaleźć następujący komentarz bloku

<!-- bower:js --> 
<!-- endbower --> 

i inject w środku wszystkie zależności określone w pliku bower.json. Oznacza to, że zadanie zostanie zapisane dla wszystkich bloków skryptusrc "/ bower_components/.." >.

Nigdy nie zauważyłeś strony z odniesieniami "bower_components", ponieważ katalog/app jest twoim "deweloperskim" środowiskiem, twoim projektem źródłowym. Ze źródła utworzymy aplikację produkcyjną uruchamiającą zadanie "kompilacja": to zadanie składa się z różnych podzadań, które tworzą różne zadania. Jedną z nich jest łączenie wszystkich skryptów dodanych do zadania bower_install w jednym pliku js.

Wtedy nie ma innego zadania, które minify ten plik, inny, że będzie uruchomić testy, inny, że stworzy katalog „dist”, gdzie zakład produkcyjny znajduje się i tak dalej ...

Jeśli używasz Yeoman ty wszystkie te zadania są już skonfigurowane w pliku Gruntfile.js, po prostu otwórz i spróbuj zrozumieć, co robi każde zadanie.

Na pierwszy rzut oka może być dość trudno zrozumieć, na przykład zadanie kompilacji odnosi się do 14 lub 15 podzadań, sugeruję, aby zarejestrować niestandardowe zadania, które uruchamiają tylko jedno zadanie i zobaczyć, co się stanie.

Cheers

Answer 2

Nie widzę żadnego problemu z łączeniem się z nim bezpośrednio, ale zazwyczaj będziesz chciał połączyć wszystkie swoje skrypty w jeden plik i zgnieść go, aby zmniejszyć rozmiar pliku do produkcji.

Chrząknięcie uglify task może z łatwością obsłużyć oba te elementy. Musisz tylko dostarczyć szereg plików do przyłączenia się.

// Project configuration. 
grunt.initConfig({ 
    uglify: { 
    my_target: { 
     files: { 
     'dest/output.min.js': ['src/input1.js', 'src/input2.js'] 
     } 
    } 
    } 
}); 

Answer 3

Można nadać katalogu instalacyjnym altana lepszej nazwy, tworząc plik .bowerrc (obok pliku bower.json) i ustawienie właściwości directory do czegoś innego. Na przykład, mam następujących w moim .bowerrc:

{ 
    "directory": "public/vendor" 
} 

Potem jest również ściśle powiązane pytanie, czy nie powinno być sprawdzenie w treści niniejszego katalogu do kontroli źródła. For a much more in depth discussion of that question, see here.

Wreszcie, jak już wspomniano, zalecane jest łączenie i minimalizowanie zależności front-end.

Answer 4

Dosyć często zaczyna się od użycia komponentów bower_components. Możesz to zobaczyć w the angular-seed starter project's script references. Po wdrożeniu aplikacji produkcyjnej i załadowaniu czasu i wydajności stają się kluczowe, należy spojrzeć na konwersję do rozwiązania, aby scalić i minify zależności.