Discussion :

[sekaijin]

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

[slim]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[sekaijin]

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

A+JYT

[sekaijin]

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 js :

Sélectionner tout - Visualiser dans une fenêtre à part

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

le pom.xml

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

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 js :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[slim]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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).

[sekaijin]

effectivement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

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