Gulp - Combinaison de tâches

Task permet une approche modulaire pour configurer Gulp. Nous devons créer une tâche pour chaque dépendance, que nous additionnerons au fur et à mesure que nous trouvons et installons d'autres plugins. La tâche Gulp aura la structure suivante -

gulp.task('task-name', function() {
   //do stuff here
});

Où «nom-tâche» est un nom de chaîne et «fonction ()» exécute votre tâche. Le «gulp.task» enregistre la fonction en tant que tâche dans le nom et spécifie les dépendances sur d'autres tâches.

Installer des plugins

Prenons un plugin appelé minify-csspour fusionner et réduire tous les scripts CSS. Il peut être installé en utilisant npm comme indiqué dans la commande suivante -

npm install gulp-minify-css --save-dev

Pour travailler avec «gulp-minify-css plugin», vous devez installer un autre plugin appelé «gulp-autoprefixer» comme indiqué dans la commande suivante -

npm install gulp-autoprefixer --save-dev

Pour concaténer les fichiers CSS, installez le gulp-concat comme indiqué dans la commande suivante -

npm install gulp-concat --save-dev

Après l'installation des plugins, vous devez écrire les dépendances dans votre fichier de configuration comme suit -

var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var concat = require('gulp-concat');

Ajout d'une tâche au fichier Gulp

Nous devons créer une tâche pour chaque dépendance, que nous ajouterions au fur et à mesure que nous installons les plugins. La tâche Gulp aura la structure suivante -

gulp.task('styles', function() {
   gulp.src(['src/styles/*.css'])
   .pipe(concat('styles.css'))
   .pipe(autoprefix('last 2 versions'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'));
});

Le plugin 'concat' concatène les fichiers CSS et le plugin 'autoprefix' indique les versions actuelle et précédente de tous les navigateurs. Il minimise tous les scripts CSS du dossier src et les copie dans le dossier de construction en appelant la méthode 'dest' avec un argument, qui représente le répertoire cible.

Pour exécuter la tâche, utilisez la commande suivante dans le répertoire de votre projet -

gulp styles

De même, nous utiliserons un autre plugin appelé 'gulp-imagemin' pour compresser le fichier image, qui peut être installé à l'aide de la commande suivante -

npm install gulp-imagemin --save-dev

Vous pouvez ajouter des dépendances à votre fichier de configuration à l'aide de la commande suivante -

var imagemin = require('gulp-imagemin');

Vous pouvez créer la tâche pour la dépendance définie ci-dessus comme indiqué dans le code suivant.

gulp.task('imagemin', function() {
   var img_src = 'src/images/**/*', img_dest = 'build/images';
   
   gulp.src(img_src)
   .pipe(changed(img_dest))
   .pipe(imagemin())
   .pipe(gulp.dest(img_dest));
});

Les images se trouvent dans «src / images / ** / *» qui sont enregistrées dans l'objet img_srcobject. Il est redirigé vers d'autres fonctions créées par le constructeur 'imagemin'. Il compresse les images du dossier src et les copie dans le dossier de construction en appelant la méthode 'dest' avec un argument, qui représente le répertoire cible.

Pour exécuter la tâche, utilisez la commande suivante dans le répertoire de votre projet -

gulp imagemin

Combinaison de plusieurs tâches

Vous pouvez exécuter plusieurs tâches à la fois en créant une tâche par défaut dans le fichier de configuration comme indiqué dans le code suivant -

gulp.task('default', ['imagemin', 'styles'], function() {

});

Le fichier Gulp est configuré et prêt à être exécuté. Exécutez la commande suivante dans le répertoire de votre projet pour exécuter les tâches combinées ci-dessus -

gulp

Lors de l'exécution de la tâche à l'aide de la commande ci-dessus, vous obtiendrez le résultat suivant dans l'invite de commande -

C:\work>gulp
[16:08:51] Using gulpfile C:\work\gulpfile.js
[16:08:51] Starting 'imagemin'...
[16:08:51] Finished 'imagemin' after 20 ms
[16:08:51] Starting 'styles'...
[16:08:51] Finished 'styles' after 13 ms
[16:08:51] Starting 'default'...
[16:08:51] Finished 'default' after 6.13 ms
[16:08:51] gulp-imagemin: Minified 0 images