Débuter avec Gulp.js

Gulp est un outil basé sur Javascript qui vous permet d'automatiser une partie de votre flux de travail. L'automatisation peut littéralement vous faire économiser des heures par jour. Que vous soyez un développeur ou un concepteur qui crée de temps en temps des structures filaires HTML, je vous encourage à creuser.

Dans cet article, nous examinerons les bases de l’utilisation de Gulp - de l’installation à la syntaxe de base, en passant par quelques exemples. À la fin de l'article, vous devriez pouvoir rechercher, installer et utiliser des packages créés par d'autres pour Gulp compiler SASS, optimiser les images, créer des sprites, concaténer des fichiers, etc.!

Installer Gulp

Ne vous inquiétez pas, l'installation est très facile. Nous devrons utiliser le terminal sous OSX et Linux ou l'invite de commande sous Windows. Je ferai référence à cela comme un terminal à partir de maintenant.

Ouvrez-le et tapez npm -v et appuyez sur Entrée. Si vous voyez le numéro de version affiché, Node est déjà installé - il s'agit d'une dépendance pour Gulp.

Si vous obtenez un “commande non trouvée” (ou une erreur similaire), rendez-vous sur la page de téléchargement de Node.js et sélectionnez le package approprié pour votre système. Une fois installé, la commande npm sera disponible dans le terminal.

L'installation de Gulp est tout aussi simple. Collez la commande suivante dans le terminal, c'est tout:

npm installer --global gulp

Ceci installera la commande Gulp qui sera disponible globalement sur votre système..

Ajouter Gulp à un projet

Gulp est maintenant installé, mais nous devrons l'ajouter à chaque projet pour lequel nous en avons besoin, séparément. Créez un dossier vide maintenant et naviguez-le dans votre terminal. Dans le dossier du projet, utilisez la commande suivante:

npm installer --save-dev gulp

Cela devrait créer un dossier node_modules et un fichier npm-debug.log dans votre dossier de projet. Celles-ci sont utilisées par Gulp pour faire sa part dans votre projet, vous n’avez pas besoin d’y penser à ce stade.

La raison pour laquelle nous devons ajouter Gulp à chaque projet spécifique est que chaque projet a des exigences différentes. On peut appeler pour SASS, un autre pour moins. L'un peut utiliser Coffeescript, l'autre pas, et ainsi de suite.

Le fichier gulp

Le Gulpfile est l'endroit où la magie opère, c'est là que vous définissez les automatisations dont vous avez besoin et quand vous voulez qu'ils se produisent. Créons une tâche par défaut vide en créant un fichier nommé gulpfile.js et en y collant le code suivant.

var gulp = require ('gulp'); gulp.task ('default', function () // Cela ne fait rien pour l'instant, nous ajouterons bientôt des fonctionnalités);

Une fois ce fichier sauvegardé, vous pouvez revenir à votre terminal et exécuter la commande gulp par elle-même. Gulp détecte le projet dans lequel il se trouve et exécute la tâche par défaut, celle que nous venons de créer. Vous devriez voir quelque chose comme ça:

Rien ne se passe vraiment ici, puisque la tâche est vide, mais cela fonctionne bien. Maintenant, allons-y avec quelques exemples appropriés!

Copier un fichier

C’est ennuyeux, je l’avouerai, mais cela vous aidera à comprendre facilement ce qui se passe..

Dans votre dossier de projet, créez un fichier nommé to_copy.txt , et un dossier nommé dev. Entrons dans notre Gulpfile et créons une nouvelle tâche nommée copie.

gulp.task ('copy', function () return gulp.src ('to_copy.txt') .pipe (gulp.dest ('dev')););

La première ligne définit une tâche nommée copie. Dans ce cadre, nous utilisons gulp.src pour spécifier les fichiers que nous ciblons avec cette tâche - dans ce cas, il s’agit d’un seul fichier nommé to_copy.txt.

Nous dirigeons ensuite ces fichiers vers la fonction gulp.dest qui spécifie où nous voulons placer ces fichiers - j'ai utilisé le répertoire dev.

Retournez à votre terminal et tapez gulp copy pour exécuter cette tâche, il convient de copier le fichier spécifié dans le répertoire spécifié, à peu près comme ceci:

La commande pipe est au cœur de Gulp. C'est un moyen efficace de déplacer des données entre des commandes. La commande src spécifie les fichiers qui sont acheminés vers la commande dest. Dans des scénarios plus complexes, nous dirigeons nos fichiers vers d'autres commandes avant de spécifier une destination..

Vous devez également savoir que la source peut être donnée sous forme de fichier unique ou de plusieurs fichiers. Si nous avons un dossier nommé production et nous voulons déplacer tous les fichiers de notre développement dossier, nous pourrions utiliser la commande suivante:

gulp.task ('copy', function () return gulp.src ('development / *') .pipe (gulp.dest ('production')););

Le caractère étoile correspond à tout ce qui se trouve dans le répertoire. Vous pouvez également faire correspondre tous les fichiers de tous les sous-répertoires et faire toutes sortes de correspondances supplémentaires. Jetez un coup d'oeil à la documentation de node-glob pour plus d'informations.

Compiler SASS

Compiler une feuille de style à partir de fichiers SASS est une tâche courante pour les développeurs. Cela peut être fait assez facilement avec Gulp, nous devrons toutefois nous préparer. Outre les commandes de base telles que src, dest et plusieurs autres, toutes les fonctionnalités sont ajoutées via des addons tiers. Voici comment je vais les utiliser.

J'écris SASS Gulp Dans Google, le premier résultat est généralement ce dont j'ai besoin, vous devriez trouver la page du paquet SASS. Il vous montre comment l’installer (npm install gulp-sass). Il est probable que vous aurez besoin d’utiliser sudo pour l’installer en tant qu’administrateur. Ce sera donc probablement le cas (sudo npm install gulp-sass). .

Une fois cela fait, vous pouvez utiliser la syntaxe dictée par le paquet pour compiler votre code. Pour ce faire, créez un fichier nommé styles.scss avec le contenu suivant:

$ primaire: # ff9900; body background: $ primaire;

Maintenant, créez la tâche Gulp suivante dans le fichier Gulp.

gulp.task ('sass', function () gulp.src ('*. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css')););

Avant d'exécuter la commande, n'oubliez pas de "requérir" le paquet en haut du fichier Gulpfile comme ceci:

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

Quand tu cours avaler sass, tous les fichiers avec l'extension scss seront dirigés vers la fonction sass, ce qui les convertira en css. Ceux-ci sont ensuite redirigés vers la fonction de destination qui les place dans le dossier css.

Regarder des fichiers et des dossiers

Jusqu'à présent, tout cela est pratique, mais nous devons encore taper une commande chaque fois nous voulons exécuter une tâche peu efficace, notamment en ce qui concerne les changements de feuille de style. Gulp vous permet de regarder les fichiers pour les changements et d'exécuter des commandes automatiquement.

Dans le fichier Gulp, créez une commande nommée automatiser qui utilisera la commande watch pour surveiller les modifications apportées à un ensemble de fichiers et exécutera une commande spécifique lorsqu'un fichier est modifié..

gulp.task ('automate', function () gulp.watch ('*. scss', ['sass']););

Si vous tapez gulp automatiser dans le terminal, la tâche sera lancée et terminée, mais elle ne reviendra pas à l'invite car elle surveille les modifications. Nous avons spécifié que nous voulions regarder tous les fichiers scss dans le répertoire racine et s'ils changeaient, nous voulions exécuter la commande sass que nous avions configurée précédemment..

Si vous changez maintenant votre fichier style.scss, il devrait être automatiquement compilé dans le fichier css du répertoire css..

Exécuter plusieurs tâches

Il existe de nombreuses situations dans lesquelles vous souhaiterez peut-être exécuter plusieurs tâches. Lorsque vous regardez votre dossier javascript, vous pouvez compiler deux fichiers puis concaténer, puis les réduire. Cela peut être fait de deux manières.

Si les tâches sont liées, j'aime bien enchaînez-les. Un bon exemple serait la concaténation et la minification de fichiers javascript. Nous dirigeons d’abord nos fichiers vers l’action concat, puis nous les canalisons vers gulp-uglify, puis nous utilisons la fonction de destination pour les sortir..

Si les tâches ne sont pas liées, vous pouvez appeler plusieurs tâches. Un exemple serait une tâche où nous voulons concaténer et réduire nos scripts et également compiler notre SASS. Voici le plein Gulpfile de ce que cela ressemblerait.

var gulp = require ('gulp'); var uglify = require ('gulp-uglify'); var concat = require ('gulp-concat'); var sass = require ('gulp-sass'); gulp.task ('scripts', function () gulp.src ('js / ** / *. js') .pipe (concat ('scripts.js')) .pipe (gulp.dest ('.') ) .pipe (uglify ()) .pipe (gulp.dest ('.'))); gulp.task ('styles', function () gulp.src ('/ *. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css'));); gulp.task ('automate', function () gulp.watch (['* .scss', 'js / ** / *. js'], ['scripts', 'styles']);); gulp.task ('default', ['scripts', 'styles']);

Si vous tapez gulp scripts dans le terminal, tous les fichiers javascript du répertoire js seront concaténés, exportés dans le répertoire principal, puis supprimés puis sauvegardés dans le répertoire principal..

Si vous tapez avaler sass, tous vos fichiers scss seront compilés et sauvegardés dans le répertoire css.

Si vous tapez gorgée (la tâche par défaut), votre des scripts la tâche sera exécutée, suivie de votre modes tâche.

le gulp automatiser task surveille les modifications dans nos fichiers scss et js dans plusieurs dossiers et effectuera les deux tâches que nous avons définies, si une modification est détectée.

Vue d'ensemble

Utiliser Gulp n'est pas difficile, en fait, beaucoup de gens le préfèrent à Grunt en raison de sa syntaxe plus simple. Rappelez-vous les étapes à suivre lors de la création d'une nouvelle automatisation:

Recherche de plugin
Installer le plugin
Requiert un plugin dans votre fichier Gulp
Utilisez la syntaxe dans la documentation

Les cinq commandes disponibles dans Gulp (tâche, exécution, surveillance, src, destination) sont les seules à connaître, tous les addons tiers possèdent une excellente documentation. Voici une liste de certaines choses que j'utilise et que vous pouvez utiliser dès maintenant:

Optimiser les images avec gulp-image-optimisation
Création de sprites d'image avec gulp-sprite
Concaténer des fichiers avec gulp-concat
Réduire les fichiers avec gulp-uglify
Suppression de fichiers avec gulp-del
Javascript lintant avec gulp-jslint
JSON lint avec gulp-jsonlint
Préfixe automatique CSS avec gulp-autoprefixer
Rechercher et remplacer en utilisant gulp-frep
Minify CSS avec gulp-minify-css