Front End Development Workflow z angularjs i gruntjs

Chciałem wiedzieć, jak zorganizowany jest frontowy program rozwoju pracy, kiedy używamy HTML 5 i angularjs.Front End Development Workflow z angularjs i gruntjs

Używamy back-atu Jetty java (nie można tego zmienić), a chcemy udostępnić spokojne usługi, z których mogą korzystać użytkownicy angularjs.

Z angularjs tak się składa, że strona główna musi zawierać wiele plików js, z których większość jest specyficzna dla aplikacji, zamierzamy podzielić aplikację logicznie w plikach js.

Więc jak poleciłbyś mieć frontowy program rozwojowy ?, aby uniknąć obsługi tak wielu różnych plików js, kolega zasugerował użycie zminimalizowania plików js przy użyciu funkcji grunt.js, jednak po zminimalizowaniu staje się trudne debugować to samo z mojego IDE ...

Powinniśmy również używać minifikacji podczas programowania, czy można to przesunąć do etapu tuż przed wdrożeniem lub podobnym, więc w trakcie rozwoju używamy niesklasyfikowanych plików js, ale zminimalizujmy je dla dopuszczenie do produkcji ?

Jeśli to możliwe, proszę sugerują również, w jaki sposób można obsłużyć import skryptów wewnątrz index.html

Zasadniczo jesteśmy do tego nowego podejścia do rozwoju, do niedawna używaliśmy JSF dla naszych poglądów jednak teraz chcemy aby sprawdzić biblioteki oparte na JS i sprawdzić, czy mogą poprawić wydajność.

Źródło

2013-06-12 Sudarshan

Świetne pytania. Mój zespół również borykał się z tymi problemami. To, co chcesz poznać, to notacja obiektu Grunt.js. Można robić takie rzeczy jak:

thetask: { 
    dev: { 
    src: [ 
     ['build/_compile','build/development/**'] 
    ] 
    }, 
    prod: { 
    src: [ 
     ['build/_compile','build/production/**'] 
    ] 
    }, 
}, 

grunt.registerTask('package:dev',['thetask:dev']); 
grunt.registerTask('package:prod',['thetast:prod']); 

~# grunt package:dev

„Z angularjs zdarza się tak, że główna strona musi zawierać wiele plików js, które w większości są specyficzne aplikacje, zamierzamy podzielić aplikację logicznie w plikach js”.

Spójrz na grunt-html-build. można dynamicznie dołączyć pliki na podstawie reguł w pliku grunt tak:

htmlbuild: { 
    dev: { 
     src: 'app/index.html', 
     dest: 'build/development', 
     options: { 
      styles: { 
       bundle: [ 
        'build/development/css/app.css', 
       ] 
      }, 
      scripts: { 
       bundle: [ 
        // Bundle order can be acheived with globbing patterns. 
        // See: https://github.com/gruntjs/grunt/wiki/Configuring-tasks#globbing-patterns 
        'build/development/js/angular.js', 
        'build/development/js/angular-resource.js', 
        'build/development/js/nginfinitescroll.js', 
        'build/development/js/*.js',    
       ] 
      }, 
     } 
    }, 
    prod: { 
     src: 'app/index.html', 
     dest: 'build/production', 
     options: { 
      styles: { 
       bundle: [ 
        'build/production/css/app.css', 
       ] 
      }, 
      scripts: { 
       bundle: [ 
        'build/production/js/app.js',    
       ] 
      }, 
     } 
    }, 
},

A potem w indeksie:

<!doctype html> 
<html lang="en" ng-app="myApp"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Playground 3</title> 
<!-- build:style bundle --> 
<!-- /build --> 
</head> 
<body> 
<div ng-include src="'/views/global.navbar.html'"></div> 
<div ng-view class="container"></div> 
<div ng-include src="'/views/global.footer.html'"></div> 
<!-- build:script bundle --> 
<!-- /build --> 
</body> 
</html>

„Również powinniśmy używać minifikacji podczas rozwoju, to może zostać przesunięta na etapie tuż przed wdrożeniem lub podobnym, więc podczas rozwoju używamy nieskonfigurowanych plików js, ale zminimalizujemy je do wersji produkcyjnej? "

będzie tylko kolejne zadanie, aby wybrać dołączyć do kompilacji:

grunt.registerTask('package:dev',['thetask:dev']); 
grunt.registerTask('package:prod',['thetast:prod','concat:prod','minify:prod']);

Źródło

2013-06-13 14:07:12

Dzięki wygląda czego potrzebujemy, pochodzące z tła java ten jest bardzo podobny do Maven tworzenia profili, które są dostępne, na pewno będzie wyglądać – Sudarshan

Bardzo podoba mi się wykonanie tego zadania. Dlaczego definiujesz "pakunek" pod każdym zadaniem dev/prod? Czy istnieje jakiś powód, dla którego nie można po prostu użyć 'styles: [a.js, b.js, c.js]'? – Clev3r

@Clever Właśnie rzuciłem to jako przykład. Chodzi o to, jak sądzę, że próbuję to zrobić, że dla twojej wersji "release" będziesz wykonywał dodatkowe/inne zadania niż twoja "rozwojowa" kompilacja. W powyższym przykładzie pakiet "produkcja" zakłada, że wszystkie pliki JS i wszystkie pliki CSS zostały najpierw zwarte/minifikowane. –

Front End Development Workflow z angularjs i gruntjs

Odpowiedz

Powiązane problemy