[maven][gulp] frontend buil assembly

**sekaijin** · 25/02/2016, 17h11

bonjour

Suite à mes derniers posts je vous fait un petit retour de mon expérience.
le but faire un build frontend avec maven qui s'exécute sans installation autre que maven.
la structure du projet est celle d'un projet maven à savoir

Code shell :

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

1
2
3
4
5
./
  pom.xml
  src
    main
    test

tout commence donc pas le pom. je vous le mets entier mais on ne s'intéressera au début qu'à certaines parties.

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
 
    <groupId>com.juste.test</groupId>
    <artifactId>example</artifactId>
    <description>sample project</description>
    <version>1.0.0-SNAPSHOT</version>
    <packaging>pom</packaging>
 
    <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}/frontend</outputDirectory>
                            <encoding>UTF-8</encoding>
                            <resources>          
                                <resource>
                                    <directory>src/config</directory>
                                    <filtering>true</filtering>
                                </resource>
                            </resources>              
                        </configuration>            
                    </execution>
                </executions>
            </plugin>
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <!-- NB! Set <version> to the latest released version of frontend-maven-plugin, like in README.md -->
                <version>0.0.29-SNAPSHOT</version>
                <configuration>
                    <workingDirectory>${basedir}/frontend</workingDirectory>
                </configuration>
                <executions>
 
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <configuration>
                            <nodeVersion>v4.2.3</nodeVersion>
                            <npmVersion>2.7.6</npmVersion>
                        </configuration>
                    </execution>
 
                    <execution>
                        <id>npm install</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <!-- Optional configuration which provides for running any npm command -->
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>
 
                    <execution>
                        <id>gulp build</id>
                        <goals>
                            <goal>gulp</goal>
                        </goals>
 
                        <phase>generate-resources</phase>
 
                        <configuration>
                            <arguments>build</arguments>
                        </configuration>
                    </execution>
 
                </executions>
            </plugin>
            <plugin>
                <artifactId>maven-assembly-plugin</artifactId>
                <version>2.6</version>
                <configuration>
                    <descriptors>
                        <descriptor>src/config/distribution.xml</descriptor>
                        <descriptor>src/config/debug.xml</descriptor>
                    </descriptors>
                </configuration>
                <executions>
                    <execution>
                        <id>create-archive</id>
                        <phase>package</phase>
                        <goals>
                            <goal>single</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>

le premier point à aborder est la partie resource-plugin
cette partie va copier les fichier présent dans src/config dans le dossier frontend
au passage elle va remplacer toutes les variables maven dans les fichiers.
ainsi le nom du projet sa version etc de dépendent que de maven. et ce même si le projet est un module d'un projet plus gros.
j'ai donc placé dans src/config les fichiers package.js, gulpfile.js, jshintrc.json, ainsi que readme.md

Code text :

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

Ceci est le readme de ${project.artifactId} version : ${project.version}.

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
26
27
28
29
30
31
32
33
34
35
36
{
  "name": "${project.artifactId}",
  "description": "${project.description}",
  "version": "${project.version}",
  "readme": "readme.md",
  "license": "Apache-2.0",
  "repository": {
    "type": "git",
    "url": "https://github.com/hawtio/hawtio"
  },
  "devDependencies": {
    "protractor": "~1.3.1",
    "bower": "^1.3.12",
    "domelementtype": "~1.1.1",
    "domhandler": "~2.2.0",
    "domutils": "~1.4.0",
    "gulp":"~3.9.1",
    "event-stream":"~3.3.0",
    "gulp-concat-css": "~2.2.0",
    "gulp-inject":"~3.0.0",
    "gulp-autoprefixer":"~3.1.0",
    "gulp-cssnano":"~2.1.1", 
    "gulp-jshint":"~2.0.0",
    "gulp-concat":"~2.6.0",
    "gulp-uglify":"~1.5.3", 
    "gulp-imagemin":"~2.4.0",
    "gulp-notify":"~2.2.0",
    "gulp-rename":"~1.2.2",
    "gulp-livereload":"~3.8.1",
    "gulp-cache":"~0.4.2",
    "del":"~2.2.0",
    "npm-check-updates": "~1.2.0"
  },
  "scripts": {
  }
}

j'ai choisi de copier ces fichiers dans frontend pour que le workdir reste propre et facile à nettoyer
le point le plus intéressant vient de frontend-maven-plugin qui lui aussi va travailler dans le dossier frontend (workingDirectory)
il va installer node npm et tous les prérequis du fichier frontend/package.json.
j'ai ensuite choisi gulp (mais le plugin gère aussi grunt) et j'active la tâche build.
le fichier utilisé est frontend/gulpfile.js.

là j'avoue que je débute et je ne sais si j'ai employé la meilleure solution.
mon fichier gulp assemble les fichiers css, assemble et minify les fichier js, compresse les images et injecte les css et js dans le fichier index.html. il produit deux fichier index.html et index.deb.html le premier est à destination de la production le second pour les devs et les tests.

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
var gulp = require('gulp'),
    es = require('event-stream'),
    autoprefixer = require('gulp-autoprefixer'),
    cssnano = require('gulp-cssnano'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    del = require('del'),
    inject = require('gulp-inject'),
    concatCss = require('gulp-concat-css'),
    mainsrc = '../src/main',
    target = '../target/web';
 
gulp.task('default', ['clean'], function() {
    gulp.start('images', 'styles', 'scripts', 'index-deb', 'index');
});
 
gulp.task('build', function() {
    gulp.start('default');
});
 
gulp.task('styles', function () {
  return gulp.src(mainsrc + '/styles/**/*.css')
    .pipe(concatCss("styles/main.css"))
    .pipe(gulp.dest(target));
});
 
gulp.task('scripts', function () {
  return gulp.src(mainsrc + '/scripts/**/*.js')
    .pipe(jshint('jshintrc.json'))
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(gulp.dest(target + '/scripts'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest(target + '/scripts'))
    ;
});
 
gulp.task('images', function() {
  return gulp.src(mainsrc + '/images/**/*')
    .pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
    .pipe(gulp.dest(target + '/images'))
    ;
});
 
gulp.task('clean', function() {
    return del([target+'/styles', target+'/styles', target+'/images'], {force: true});
});
 
gulp.task('index', ['styles', 'scripts'], function () {
  return gulp.src(mainsrc + '/index.html')
    .pipe(rename('index.html'))
    .pipe(inject(gulp.src(target+'/styles/main.css', {read: false}), {relative: true}))
    .pipe(inject(gulp.src(target+'/scripts/main.min.js', {read: false}), {relative: true}))
    .pipe(gulp.dest(target + '/'))
    .pipe(notify({ message: 'index task complete' }));
;
});
 
gulp.task('index-deb', ['styles', 'scripts'], function () {
  return gulp.src(mainsrc + '/index.html')
    .pipe(rename('index.html'))
    .pipe(inject(gulp.src(target+'/styles/main.css', {read: false}), {relative: true}))
    .pipe(inject(gulp.src(target+'/scripts/main.js', {read: false}), {relative: true}))
    .pipe(rename({suffix: '.deb'}))
    .pipe(gulp.dest(target + '/'))
    .pipe(notify({ message: 'debug task complete' }));
;
});

reste la dernière partie un simple maven assembly qui crée 2 zip un pour la prod un pour le debug.
pour cela j'ai placé les fichiers distribution.xml et debug.xml dans le dossier src/config

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
32
33
34
35
36
37
38
39
40
41
<assembly xmlns="http://maven.apache.org/plugins/maven-assembly-plugin/assembly/1.1.3"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/plugins/maven-assembly-plugin/assembly/1.1.3 http://maven.apache.org/xsd/assembly-1.1.3.xsd">
    <id>debug</id>
    <formats>
        <format>zip</format>
    </formats>
    <fileSets>
        <fileSet>
            <directory>${basedir}/target/web/scripts</directory>
            <outputDirectory>scripts</outputDirectory>
            <includes>
                <include>**/*.js</include>
            </includes>
            <excludes>
                <exclude>**/*min.js</exclude>
            </excludes>
        </fileSet>
        <fileSet>
            <directory>${basedir}/target/web/images</directory>
            <outputDirectory>images</outputDirectory>
            <includes>
                <include>**/*</include>
            </includes>
        </fileSet>
        <fileSet>
            <directory>${basedir}/target/web/styles</directory>
            <outputDirectory>styles</outputDirectory>
            <includes>
                <include>**/*</include>
            </includes>
        </fileSet>
        <fileSet>
            <directory>${basedir}/target/web/</directory>
            <outputDirectory></outputDirectory>
            <includes>
                <include>**/index.deb.html</include>
            </includes>
        </fileSet>
    </fileSets>
</assembly>

le fichier distribution.xml est quasi identique il prend les fichiers min et exclus les fichiers deb.

A+JYT

[maven][gulp] frontend buil assembly

JavaScript

Discussions similaires

Partager

Partager