Usine Logicielle Grunt Angular

Version imprimable

20/02/2016, 17h29
sekaijin

Usine Logicielle Grunt Angular
Bonjour

Je mets en place en ce moment une config dans une usine logicielle pour un projet d'ont une partie est faite avec Angular.

Je maitrise tout les builds tests et analyse de la qualité du code pour le back office écrit en java.
pour le front office que je comment à intégrer dans l'usine, j'ai du PHP et je l'angular.
pour le php je n'ai pas trop de soucis mais pour Angular grunt à été choisi pour le build

je sais interfacer grunt avec mon usine logicielle.
Mais aujourd'hui cette partie du projet est dans une phase plutôt exploratoire et peut structuré.
Il n'y a pas de build bien défini, certaines parties en sont exclues, certaines partie du front sont faite à la main et teste directement sans build. il n'y aucun mécanisme prévu pour produire une version de debug et une de production.

Je cherche un bon tutoriel pour m'aider à mettre en place une structure et un build (grunt) qui permets ceci
- Analyser les codes source js, html, css
- Assembler les différents modules pour produire une version de debug
- Assembler les différents modules pour produire une version de production
- Passer les tests unitaires
- Générer la documentation
Mon usine se chargeant de produire les packages livrables, les mettre à disposition sur le repository, créer les versions
Assembler les éléments du front et du back office.

A+JYT

Bonjour,

On pourrait écrire un bouquin pour répondre à ta question...
Mais en gros, vous avez besoin de configurer grunt pour les actions que tu as cité et de l'intégrer dans le build du projet java (job jenkins).
Je travaille sur un projet que j'ai démarré avec jhipster. Lors de la génération, un fichier gruntfile (ici) est généré avec tous les plugins pour faire ce que tu dis.
C'est un très bon exemple pour faire un build js correct (jshint, concat, minify, etc.) intégré à un build maven :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <plugin> <groupId>com.github.trecloux</groupId> <artifactId>yeoman-maven-plugin</artifactId> <version>0.4</version> <executions> <execution> <id>run-frontend-build</id> <phase>generate-resources</phase> <goals> <goal>build</goal> </goals> <configuration> <buildTool>grunt</buildTool> <buildArgs>build --no-color</buildArgs> </configuration> </execution> </executions> <configuration> <yeomanProjectDirectory>${project.basedir}</yeomanProjectDirectory> </configuration> </plugin>
Tous les plugins dont vous avez besoin sont sur cette page : Plugins Grunt
et voici un plugin pour générer la jsdoc et qui peut être intégré à grunt : npm jsdoc

21/02/2016, 11h45
sekaijin

merci pour cette réponse rapide
pour maven j'utilise https://github.com/eirslett/frontend-maven-plugin

A+JYT

Salut j'ai vu que tu utilisais un parseur xml dans grunt pour récupérer le N° de version dans le POM.xml

je procède de la façon inverse. Maven peut injecter ses propriétés dans les fichiers sources. j'utilise donc maven ressource pour générer le fichier package.json. et le reste.
fichier ${basedir}/src/config/package.json

Code:

1
2
3
4
5
6
{
  "name": "${project.artifactId}",
  "version": "${project.version}",
  "description" : "${project.description}",
  "dependencies": {
...

le pom.xml

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
...
    <artifactId>example</artifactId>
    <version>1.0.0-SNAPSHOT</version>
    <packaging>pom</packaging>
    <description>sample pom grunt project</description>
    <build>
        <plugins>
            <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <version>2.7</version>
                <executions>
                    <execution>
                        <id>copy-resources</id>
                        <!-- here the phase you need -->
                        <phase>generate-sources</phase>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>${basedir}</outputDirectory>
                            <resources>
                                <resource>
                                    <directory>${basedir}/src/config</directory>
                                    <filtering>true</filtering>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
...

le fichier ${basedir}/src/config/package.json est donc copié avant le build dans ${basedir}/package.json et les variables maven sont remplacées par leur valeur
fichier ${basedir}/package.json généré

Code:

1
2
3
4
5
6
{
  "name": "example",
  "version": "1.0.0-SNAPSHOT",
  "description" : "sample pom grunt project",
  "dependencies": {
...

De cette façon j'injecte les versions des différents outils à partir des propriétés définies dans la pom.
A+JYT

Oui, mais la fonction est utilisée dans ngconstant à la ligne 305 et 314.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ngconstant: { options: { name: 'sampleapplicationApp', deps: false, wrap: '"use strict";\n// DO NOT EDIT THIS FILE, EDIT THE GRUNT TASK NGCONSTANT SETTINGS INSTEAD WHICH GENERATES THIS FILE\n{%= __ngModule %}' }, dev: { options: { dest: 'src/main/webapp/scripts/app/app.constants.js' }, constants: { ENV: 'dev', VERSION: parseVersionFromPomXml() } }, prod: { options: { dest: '.tmp/scripts/app/app.constants.js' }, constants: { ENV: 'prod', VERSION: parseVersionFromPomXml() } } }
C'est des constantes injectées dans l'appli angular.
Tu peux les supprimer ou faire la même chose pour le fichier gruntfile...
Au fait, c'est pas moi qui ai créé le fichier. C'est le projet JHipster (scaffolding Java AngularJS).

21/02/2016, 16h26
sekaijin
effectivement
Citation:
Code:

1 2 3 4 constants: { ENV: 'dev', VERSION: parseVersionFromPomXml() }
j'avais vu ça aussi.
juste que grunt dans sa doc préconise d'utiliser
Code:

1 2 3 4 5 module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json') }); };
et
Code:

1 2 3 4 5 6 dist: { // the files to concatenate src: ['src/**/*.js'], // the location of the resulting JS file dest: 'dist/<%= pkg.name %>.js' }
du coup il suffit d'injecter toutes les définitions de son choix dans package.json depuis maven pour pouvoir les utiliser partout.

j'ai trouvé surprenant l'utilisation d'un parseur XML pour lire des donnée du fichier pom.xml alors que maven fait la même chose avec en plus l'héritage des propriétés des parents.

Citation:

Au fait, c'est pas moi qui ai créé le fichier. C'est le projet JHipster (scaffolding Java AngularJS).

Ok j'ai été un peu rapide dans ma réponse.
en tout cas merci car c'est un exemple instructif.
A+JYT