Premiers pas avec les packages de démarrage Gulp

Parler de CodeKit et des avantages qu’il offre aux développeurs frontaux est également venu juste après un article et des avantages qu’offre également Gulp.

Un message sur la différence entre les deux, pourquoi vous voudrez peut-être l’un plutôt que l’autre, et les avantages ou les inconvénients de l’un ou l’autre peut être son message.

Mais pour cela, j’aimerais prendre les packages de démarrage sur lesquels j’ai écrit concernant Gulp et donner un exemple simple d’un fichier Gulp de démarrage et comment l’utiliser dans vos projets WordPress.

Premiers pas avec Gulp

Tout d’abord, je suis un fan d’Homebrew, donc quand il s’agit de gérer des packages qui ne font pas partie du Mac App Store, je l’utilise. Cela facilite grandement l’installation, la mise à jour et la désinstallation des packages.

Si vous n’avez pas lu mon guide sur Homebrew, veuillez le faire car le reste de cet article suppose que vous l’avez installé.

1 Installer Gulp

Si vous avez installé Homebrew, assurez-vous que tout a l’air bien et est à jour, j’ai un guide complet pour configurer Gulp sur votre machine locale.

Donc, si vous n’avez pas encore cette configuration, consultez cet article pour savoir comment procéder.

2 Écrivez votre fichier de configuration Gulp, partie 1

Pour initialiser un fichier de configuration Gulp, entrez la commande suivante dans le répertoire racine de votre projet dans votre terminal :

Facile, n’est-ce pas ?

Cela créera un gulpfile.js vide dans le répertoire racine de votre projet. Ensuite, il est temps de modifier le fichier.

Pour cet article, je vais utiliser quatre packages que j’ai précédemment décrits :

• gorgée
• avaler-sass
• gorgée-image
• engloutir

Chacune de ces tâches est responsable de la transpilation de Sass, de l’optimisation des images et de la minification de JavaScript.

Les tâches que vous souhaitez exécuter à partir de la ligne de commande ne doivent pas contenir d’espaces.

Pour configurer les tâches de base afin que vous puissiez les exécuter à partir de la ligne de commande, vous devrez procéder comme suit :

Toupet

gulp.task('sass', function(){
  return gulp.src('assets/styles/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('assets/styles/css'))
});

Javascript

gulp.task('js', function() {
  return gulp.src('assets/scripts/dev/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('assets/scripts'));
});

Images

gulp.task('images', function() {
  return gulp.src('assets/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('assets/images'))
});

Les exécuter individuellement

L’exécution de ces tâches individuellement nécessite que vous saisissiez ce qui suit dans la console chaque fois que vous souhaitez, par exemple, transpiler vos fichiers Sass et minifier vos fichiers JavaScript :

Mais cela vieillit vite. De plus, c’est moins efficace, surtout lorsque vous pouvez configurer une montre pour exécuter automatiquement vos tâches chaque fois que vous enregistrez un fichier.

2 Écrivez votre fichier de configuration Gulp, partie 2

Configurer une montre est probablement la meilleure chose que vous puissiez faire pour gagner du temps avec Gulp.

Surveillez les fichiers et faites quelque chose lorsqu’un fichier change. Cela renvoie toujours un EventEmitter qui émet des change événements.

Configurer une montre est facile. C’est un peu comme une tâche (en fait, cela nécessite une tâche) mais il a aussi des arguments spéciaux. Pour ajouter une tâche de surveillance qui gérera Sass, JavaScript et les images, configurez ce qui suit dans votre gulpfile.js :

gulp.task('watch', function() {
    gulp.watch('assets/styles/scss/*.scss', gulp.series('sass'));
    gulp.watch('assets/scripts/dev/*.js', gulp.series('js'));
    gulp.watch('assets/images/*', gulp.series('images'));
});

Ensuite, exécutez simplement la tâche :

À partir de là, chaque fois que vous enregistrez un fichier Sass, un fichier JavaScript ou apportez une modification à une image, la tâche se déclenchera automatiquement en effectuant le travail de la tâche définie. Notez que cela s’exécutera perpétuellement dans son fil, vous devrez donc ouvrir un nouvel onglet ou une nouvelle fenêtre de terminal si vous devez effectuer des travaux supplémentaires.

Remarque sur les versions

Dans les versions antérieures de Gulp, le deuxième argument de la fonction watch acceptait un tableau ; cependant, la dernière version nécessite une fonction réelle (que vous pouvez voir ci-dessus dans la mesure où j’ai déclaré series ).

En bref, Gulp 4 permet une exécution séquentielle, qui se fait via series, et une exécution parallèle (qui peut utiliser la fonction parallèle ). Ceux-ci sortent du cadre de cet article car cela est uniquement destiné à vous aider à démarrer.

Une fois cela fait, vous devriez avoir beaucoup plus d’automatisation dans votre processus de construction.