Frontend-Entwicklung Workflow mit angularjs und gruntjs

Ich wollte wissen, wie der Front-End-Entwicklungs-Workflow organisiert ist, wenn wir HTML 5 und angularjs verwenden.Frontend-Entwicklung Workflow mit angularjs und gruntjs

Wir verwenden ein Jetty-Java-Backend (kann nicht geändert werden), und wir wollen erholsame Dienste aussetzen, die die angularjs verbrauchen können.

Bei angularjs passiert es, dass die Hauptseite viele js-Dateien enthalten muss, von denen die meisten anwendungsspezifisch sind. Wir beabsichtigen, die Anwendung logisch in js-Dateien aufzuteilen.

Also, wie würden Sie empfehlen, den Front-End-Entwicklungs-Workflow zu haben? Um zu vermeiden, so viele verschiedene js-Dateien zu behandeln, hat ein Kollege vorgeschlagen, js-Dateien mit grunt.js zu minimieren, aber sobald es minimiert wird, wird es schwierig debug das gleiche von meiner IDE ...

Auch sollten wir während der Entwicklung minification verwenden, kann dies zu einer Phase kurz vor der Bereitstellung oder dergleichen geschoben werden, so während der Entwicklung verwenden wir die unminifizierten js-Dateien jedoch minimieren sie für die Produktionsfreigabe?

Wenn das möglich ist, bitte auch vorschlagen, wie man die Skriptimporte innerhalb der index.html

Grundsätzlich ist behandeln wir diesen Ansatz der Entwicklung neu sind, bis vor kurzem JSF wir für unsere Ansichten verwendet, aber jetzt wollen wir um die JS-basierten Bibliotheken zu überprüfen und zu sehen, ob sie die Produktivität verbessern können.

Quelle

2013-06-12 Sudarshan

Große Fragen. Mein Team ist auch auf diese Probleme gestoßen. Sie werden sich mit der Objektnotation Grunt.js vertraut machen. Sie können Dinge wie:

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

„Mit AngularJS es geschieht so, dass die Haupt-Seite viele js Dateien beinhalten muss, von denen die meisten Anwendung spezifisch sind, wollen wir die Anwendung logisch in js Dateien teilen.“

Werfen Sie einen Blick auf grunt-html-build. Sie können dynamisch Dateien wie diese basierend auf Regeln in Ihrem Grunzen-Datei enthalten:

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',    
       ] 
      }, 
     } 
    }, 
},

Und dann in Ihrem Index:

<!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>

„Auch sollten wir minification während der Entwicklung verwenden, können diese geschoben werden zu einer Phase kurz vor der Bereitstellung oder dergleichen, so dass wir während der Entwicklung die unminifizierten js-Dateien verwenden, sie jedoch für die Produktionsfreigabe minimieren? "

Wäre nur eine andere Aufgabe in Ihren Build zu wählen sind:

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

Quelle

2013-06-13 14:07:12

Dank aussieht, was bräuchten wir, von einem Hintergrund java kommt dies dem Maven sehr ähnlich ist, Profile erstellen, die zur Verfügung stehen, werde sicherlich schauen – Sudarshan

Ich mag diese Grunt-Task-Implementierung wirklich. Warum definierst du 'bundle' unter jeder Dev/Prod-Aufgabe? Gibt es einen Grund, warum du nicht einfach 'styles: [a.js, b.js, c.js]' 'verwenden kannst? – Clev3r

@Clever Ich habe es einfach als Beispiel zusammengeworfen. Der Punkt, den ich versucht habe zu machen, ist, dass Sie für Ihre "Release" -Build zusätzliche/andere Aufgaben ausführen als Ihre "Entwicklungs" -Build. Im obigen Beispiel geht das Paket "production" davon aus, dass alle JS-Dateien und alle CSS-Dateien zuerst hinzugefügt/verkleinert wurden. –

Frontend-Entwicklung Workflow mit angularjs und gruntjs

Antwort

Verwandte Themen