Intégration des tâches gulp dans la chaîne d’outils de SharePoint Framework
Les outils de développement côté client de SharePoint utilisent Gulp en tant que programme d’exécution des tâches pour le processus de génération :
- Regrouper et réduire les fichiers JavaScript et CSS.
- Exécuter des outils pour appeler les tâches de regroupement et de réduction avant chaque génération.
- Compiler les fichiers LESS ou Sass dans un fichier CSS.
- Compiler les fichiers TypeScript dans un fichier JavaScript.
L’intégration de vos tâches gulp personnalisées dans le pipeline de build est une tâche courante que vous pouvez ajouter à la chaîne d’outils de SharePoint Framework.
Tâches gulp
Normalement, les tâches Gulp sont définies dans gulpfile.js de la façon suivante :
gulp.task('somename', function() {
// Do stuff
});
Lorsque vous utilisez la chaîne d’outils de SharePoint Framework, vous devez définir vos tâches dans le pipeline de build de l’infrastructure. Une fois la tâche définie et enregistrée avec le pipeline, elle est ajoutée à la chaîne d’outils.
SharePoint Framework utilise une chaîne d’outils de création courante constituée d’un ensemble de packages npm qui partagent des tâches de création courantes. Les tâches par défaut sont définies dans le package courant contrairement au gulpfile.js de votre projet côté client. Pour afficher les tâches disponibles, vous pouvez exécuter la commande suivante dans une console dans le répertoire de votre projet :
gulp --tasks
Cette commande répertorie toutes les tâches disponibles.

Tâches gulp personnalisées
Pour ajouter vos tâches personnalisées, définissez-les dans le fichier gulpfile.js.
Ouvrez le fichier gulpfile.js dans votre éditeur de code. Le code par défaut initialise la chaîne d’outils de SharePoint Framework et l’instance Gulp globale pour la chaîne d’outils. Toutes les tâches personnalisées ajoutées doivent être définies avant l’initialisation de l’instance Gulp globale.
Ajout de votre tâche personnalisée
Pour ajouter votre tâche gulp personnalisée, ajoutez une nouvelle sous-tâche au pipeline de build SharePoint Framework à l’aide de la fonction build.subTask :
let helloWorldSubtask = build.subTask('log-hello-world-subtask', function(gulp, buildOptions, done) {
this.log('Hello, World!');
// use functions from gulp task here
done();
});
S’il existe un flux, vous renvoyez celui-ci :
let helloWorldSubtask = build.subTask('log-hello-world-subtask', function(gulp, buildOptions, done) {
return gulp.src('images/*.png')
.pipe(gulp.dest('public'));
});
Enregistrement de votre tâche avec une ligne de commande gulp
Une fois la tâche personnalisée définie, vous pouvez enregistrer cette tâche personnalisée avec la ligne de commande gulp en utilisant la fonction build.task() :
// Register the task with gulp command line
let helloWorldTask = build.task('hello-world', helloWorldSubtask);
Notes
Toutes les tâches personnalisées ajoutées doivent être définies avant l’initialisation de l’instance Gulp globale, c’est-à-dire avant la ligne de code suivante : build.initialize(gulp);
Vous pouvez maintenant exécuter votre commande personnalisée dans la ligne de commande comme suit :
gulp hello-world
Notes
Vous ne pouvez pas exécuter la sous-tâche enregistrée à l’aide de la fonction build.subTask() directement à partir de la ligne de commande. Vous pouvez uniquement exécuter la tâche enregistrée à l’aide de la fonction build.task().
Connexion au processus de build de SharePoint Framework
Pour ajouter vos propres messages de journalisation au processus de build de SharePoint Framework, vous pouvez utiliser les méthodes suivantes dans la tâche personnalisée :
log(message: string): journalisation d’un message ;logWarning(message: string): journalisation d’un avertissement et ajout également à la liste d’avertissements qui précèdent l’échec du processus de build ;logError(message: string): journalisation d’une erreur et ajout également à la liste d’erreurs qui précèdent l’échec du processus de build.fileWarning(filePath: string, line: number, column: number, warningCode: string: message: string): journalisation d’un avertissement lié à un fichier spécifique et qui provoque l’échec du processus de buildfileError(filePath: string, line: number, column: number, warningCode: string: message: string): journalisation d’une erreur liée à un fichier spécifique et qui provoque l’échec du processus de build.
Exemple :
let helloWorldSubtask = build.subTask('log-hello-world-subtask', function(gulp, buildOptions, done) {
this.log('Logs message');
this.logWarning('Logs a warning');
this.logError('Logs an error');
done();
});

Exécution de votre tâche personnalisée avant ou après les tâches disponibles
Vous pouvez également ajouter cette tâche personnalisée à exécuter avant ou après certaines tâches Gulp disponibles. Les tâches Gulp suivantes vous permettent d’injecter votre tâche personnalisée avant ou après la tâche :
- Tâche de création générique (qui se compose de toutes les tâches disponibles)
- Tâche TypeScript
Les tâches de l’infrastructure SharePoint sont disponibles dans la plate-forme de création par défaut. La plate-forme de build est un ensemble de tâches définies dans un but précis, dans ce cas, pour la création de packages côté client. Vous pouvez accéder à cette plate-forme par défaut à l’aide de l’objet build.rig, puis accéder aux fonctions de tâche avant et après :
// execute before the TypeScript subtask
build.rig.addPreBuildTask(helloWorldTask);
// execute after TypeScript subtask
build.rig.addPostTypescriptTask(helloWorldTask);
// execute after all build tasks
build.rig.addPostBuildTask(helloWorldTask);
Exemple : tâche de redimensionnement d’image personnalisée
Utilisons par exemple la tâche gulp de redimensionnement d’image. Il s’agit d’une tâche simple qui vous permet de redimensionner les images.
Vous pouvez télécharger l’exemple complet dans samples/js-extend-gulp/.
La documentation de la tâche de redimensionnement d’image décrit comment utiliser cette tâche personnalisée :
var gulp = require('gulp');
var imageResize = require('gulp-image-resize');
gulp.task('default', function () {
gulp.src('test.png')
.pipe(imageResize({
width : 100,
height : 100,
crop : true,
upscale : false
}))
.pipe(gulp.dest('dist'));
});
Nous utilisons ces informations pour ajouter cette tâche dans notre projet à l’aide des fonctions build.subTask() et build.task() :
var imageResize = require('gulp-image-resize');
let imageResizeSubTask = build.subTask('image-resize-subtask', function(gulp, buildOptions, done){
return gulp.src('images/*.jpg')
.pipe(imageResize({
width: 100,
height: 100,
crop: false
}))
.pipe(gulp.dest(path.join(buildOptions.libFolder, 'images')))
});
let imageResizeTask = build.task('resize-images', imageResizeSubTask);
Comme nous définissons le flux, nous renvoyons le flux dans labuild.subTask() fonction au pipeline de construction. Le pipeline de construction exécute ensuite de manière asynchrone ce flux gulp.
Vous pouvez maintenant exécuter cette tâche à partir de la ligne de commande gulp comme suit :
gulp resize-images

Cette tâche resize-images s’affiche également dans les tâches disponibles pour votre projet lorsque vous exécutez gulp --tasks :
