Share
Est-ce que vous et votre équipe travaillez avec des guides de style? Avez-vous de la documentation pour vos modules? Sinon, ne paniquez pas. Dans ce tutoriel, je vais vous montrer comment améliorer votre collaboration avec votre équipe. Nous allons explorer les concepts suggérés par Brad Frost et Dave Olsen, en utilisant Pattern Lab pour créer des guides de style, avec Gulp pour gérer les actifs. Commençons!
Gulp.js est un système de génération en continu et un runner de tâches. Le concept important est que vous avez des flux dans lesquels vous définissez beaucoup de choses pour vos fichiers. C'est plus rapide que de gérer les choses manuellement, ce qui vous fait économiser beaucoup de temps et d'énergie. Par exemple, dans ce tutoriel, nous allons mettre tous nos fichiers Sass dans un tuyau (un processus):
Pour en savoir plus sur les bases de Gulp, consultez le guide du débutant de Kezz Bracey La ligne de commande pour la conception Web: Automatisation avec Gulp.
Pattern Lab est un concept pour créer atomique systèmes de conception; construire des modules au lieu de construire des pages directement. Il définit plusieurs pièces composites:
Vous commencez avec le plus petit élément, en développant des parties plus grandes, jusqu'à obtenir des pages complètes. Cette approche vous permet de gagner du temps, de collaborer et garantit une structure solide.
Les atomes ne peuvent pas être décomposés en morceaux plus petits.
Ce sont les blocs les plus simples, y compris les balises fondamentales comme les listes, les couleurs, les polices de caractères, les animations, etc..
Les molécules sont des groupes d'éléments différents (atomes) qui fonctionnent ensemble comme une unité.
Par exemple, un teaser avec un titre, une image, un paragraphe et un lien du type "En savoir plus". Chacun de ceux-ci est un élément unique, mais ensemble, ils deviennent une molécule; partie d'un système plus vaste et plus complexe.
Les organismes sont des groupes d'éléments (atomes et molécules) et fonctionnent comme une section de votre site Web..
Pensez, par exemple, à un en-tête de site Web. C'est un système plus vaste, construit à partir de molécules telles qu'une forme de recherche et de navigation, les deux étant à leur tour construits à partir d'atomes plus petits..
Organisme d’en-tête Pattern Lab, vu sur petit écranConsultez les démonstrations d'interface utilisateur en ligne et obtenez un aperçu de l'ensemble du système..
Il est maintenant temps de combiner ces deux systèmes et de créer un flux de travail pour votre équipe. Pattern Lab nous donnera notre code HTML et nous fournira une interface utilisateur simple, Gulp gérera tous les actifs dont nous avons besoin.
Pour utiliser Gulp, vous devez d’abord avoir node.js sur votre système. Si vous ne le faites pas, jetez un coup d'œil à La ligne de commande pour la conception Web de Kezz Bracey: Préparer des paquetages tiers pour des instructions d'installation.
Commençons par installer Gulp.js globalement. Dans le terminal, tapez:
npm installer gulp -g
Maintenant, nous devons cloner le référentiel de Patternlab pour nous donner une base de travail.
git clone [email protected]: pattern-lab / patternlab-php.git
Ensuite, nous avons besoin d'un fichier gulp pour configurer nos tâches. Créer un gulpfile.js à la racine de votre dossier de projet. Après cela, nous avons besoin d’un fichier de configuration dans lequel nous définissons tous les chemins. Créez donc un fichier. build.config.json dans votre dossier.
Les fichiers suivants sont également nécessaires:
Accentsconagua
.Bowerrcpackage.jsonbower.jsonAprès toutes ces étapes de base, nous avons la structure de base du projet. Commençons maintenant à construire les tâches pour notre flux de travail.
Au sommet de notre fichier gulpfile.js, nous avons besoin de chaque dépendance. Si vous installez un plugin, vous devez le «demander» et lui donner un nom..
Commencez avec gulp et notre fichier de configuration pour tous les chemins et toutes les configurations.
var gulp = require ('gulp'), config = require ('./ build.config.json');Au cours de notre processus de développement, nous n'aurons pas besoin de minimiser notre code (c'est une perte de temps si nous ne sommes pas prêts à le déployer). Avec ce qui suit production variable, nous pouvons activer / désactiver certaines tâches. Vous verrez cela plus tard en action.
// Gestion de la production // Description: Utilisez la variable 'production' avec 'gulpif' // Basculez la minifération et l'optimisation pour la production d'actifs var;
Avec la configuration des choses, nous pouvons maintenant commencer à ajouter diverses tâches pour nous aider dans notre développement.!
// Installe la dépendance nécessaire npm install gulp-clean // Requiert une dépendance var clean = require ('gulp-clean');Si vous supprimez une image du dossier "source /", vous constaterez qu'il existe également une copie de l'image dans "public /". En raison de cette duplication, nous allons effectuer une étape simple pour nettoyer le dossier de l'image dans “public /”.
// Task: Clean: before // Description: Suppression des fichiers d'actifs avant d'exécuter d'autres tâches gulp.task ('clean: before', function () return gulp.src (config.assets.dest) .pipe (clean (force : vrai )) );// Installer les dépendances nécessaires npm installer gulp-concat gulp-uglify gulp-rename // Exiger des dépendances var concat = require ('gulp-concat'); var uglify = require ('gulp-uglify'); var rename = require ('gulp-rename');Pour le déploiement, il est important de ne disposer que d’un seul fichier avec tous les scripts. Pour cela, nous allons utiliser le plugin avale-concat et combiner tous nos scripts pour produire application.js. Si la variable production est vrai, alors application.js sera lamenté et obtenez un nouveau nom: application.min.js.
gulp.task ('scripts', function () return gulp.src (config.scripts.files) .pipe (concat ('application.js')) .pipe (gulpif (production, uglify ())) .pipe ( gulpif (production, renommer (suffixe: '.min'))) .pipe (gulp.dest (config.scripts.dest)) .pipe (browserSync.reload (stream: true)););Cette tâche va pousser toutes les polices dans le dossier public. Rien de plus.
// Tâche: Gérer les polices gulp.task ('fonts', function () return gulp.src (config.fonts.files) .pipe (gulp.dest (config.fonts.dest)) .pipe (browserSync.reload ( stream: true)););Pour cette étape, nous allons installer et demander le plugin gulp-imagemin. Une fois que nous avons fait cela, nous pouvons l’utiliser pour réduire les images. Cela permettra d'économiser de la mémoire et d'améliorer les performances.
// Installer imagemin npm installer gulp-imagemin // Exiger des dépendances var imagemin = require ('gulp-imagemin');Si la variable production est vrai, alors toutes les images seront minifiées. Avec cela fait, nous les poussons dans le dossier de destination.
// Tâche: Gérer les images gulp.task ('images', function () return gulp.src (config.images.files) .pipe (gulpif (production, imagemin ())) .pipe (gulp.dest (config. images.dest)) .pipe (browserSync.reload (stream: true)););Installons et demandons les dépendances gulp-sass et gulp-cssmin.
// Installe les dépendances nécessaires npm install gulp-sass gulp-cssmin // Exige des dépendances var sass = require ('gulp-sass'); var cssmin = require ('gulp-cssmin');Maintenant, nous allons prendre tous les fichiers Sass, utiliser le plugin Sass pour les compiler en CSS, puis si la variable production est vrai, cssmin fera son travail.
// Tâche: Manipuler Sass et CSS gulp.task ('sass', function () return gulp.src (config.scss.files) .pipe (sass ()) .pipe (gulpif (production, cssmin ())) .pipe (gulpif (production, renommer (suffixe: '.min'))) .pipe (gulp.dest (config.scss.dest)) .pipe (browserSync.reload (stream: true)); )Pattern Lab a son propre serveur, que vous pouvez démarrer avec une simple commande shell. Pour exécuter cette commande nous avons besoin du plugin gulp-shell.
// Installer les dépendances nécessaires npm install gulp-shell // Require les dépendances var shell = require ('gulp-shell');À ce stade, nous allons copier le dossier styleguide du noyau vers Publique. À ce stade, vous pourrez voir un front-end solide dans le navigateur..
// Task: patternlab // Description: Construire des fichiers de laboratoire de patterns statiques via le script PHP gulp.task ('patternlab', function () return gulp.src (", read: false) .pipe (shell (['php core / builder.php -gpn '])) .pipe (browserSync.reload (stream: true));); // Tâche: styleguide // Description: Copier le styleguide-Folder de core / vers public gulp.task ('styleguide', function () return gulp.src (config.patternlab.styleguide.files) .pipe (gulp.dest (config.patternlab.styleguide.dest)););Pattern Lab a un serveur intégré, mais Browser-Sync gère l'injection de modifications CSS sans rechargement de page..
// Installer les dépendances nécessaires npm installer browser-sync gulp-watch // Exiger des dépendances var browser-sync = require ('browser-sync'); var watch = require ('gulp-watch');L'observateur prend en charge les modifications et déclenche les tâches spécifiques. Après cela, la synchronisation du navigateur met à jour notre vue dans le navigateur..
// tâche: BrowserSync // Description: exécutez le serveur BrowserSync avec le mode fantôme désactivé gulp.task ('browser-sync', function () browserSync (serveur: baseDir: config.root, ghostMode: true, open: " externe "););Nous spécifions les fichiers pour l'observateur et déclenchons les tâches dont nous avons besoin en cas de changement.
// Tâche: Regarder les fichiers gulp.task ('watch', function () // Regarder les fichiers du Pattern Lab gulp.watch (config.patternlab.files, ['patternlab'])); // Regarder les scripts gulp.watch (config .scripts.files, ['scripts']); // Regarder les images gulp.watch (config.images.files, ['images']); // Regarder Sass gulp.watch (config.scss.files, ['sass ']); // Regardez les polices gulp.watch (config.fonts.files, [' fonts ']););L'écriture gorgée dans le shell déclenche la tâche par défaut. Mais avant que Gulp ne commence cela, il déclenche la propre: avant tâche de nettoyer tous les fichiers publics.
// Task: Default // Description: Construit tous les éléments du projet une fois gulp.task ('default', ['clean: before'], function () production = false; gulp.start ('patternlab', 'styleguide ',' polices ',' sass ',' images ',' scripts '););Créons une tâche à développer dans le guide de style, mais sans minimiser les actifs. Cela déclenche synchronisation du navigateur, construit tous les actifs et commence l'observateur.
// Tâche: Lancez votre processus de production // Description: tapez 'gulp' dans le terminal gulp.task ('serve', function () production = false; gulp.start ('browser-sync', 'default', 'regarder' ); );Pour cette étape, nous aurons besoin de quelques nouveaux plugins.
// Installer les dépendances nécessaires npm installer gulp-bump gulp-filtre gulp-git gulp-tag-version // Exiger des dépendances var bump = require ('gulp-bump'); var filter = require ('gulp-filter'); var git = require ('gulp-git'); var tagversion = require ('gulp-tag-version');Maintenant, vous définissez la tâche d'abeille Libération, régler la production variable à vrai (maintenant nous devons minifier) et ouvrir le flux. Vous devez prendre tous les fichiers avec un numéro de version, utiliser le plugin bump et permettre de définir le type (patch, mineur ou majeur) via un paramètre dans le shell.
Si vous exécutez le Libération-tâche sans type alors bouffée d'air prendra un patch - x.x.1. Après cela, poussez les fichiers à la racine et validez les modifications. Il est maintenant temps de générer une nouvelle balise pour le projet. Le fichier package.json est nécessaire pour obtenir le numéro de version actuel de la nouvelle balise.
Enfin, nous poussons tous les fichiers et balises à l’origine et dans la branche que nous voulons..
// Fonction: Relâcher (Bump & Tagging) // Description: Bump les versions de npm, créer un tag Git et transmettre à l'origine gulp.task ('release', function () production = true; renvoyer gulp.src (config.versioning. fichiers) .pipe (bump (type: gulp.env.type || 'patch')) .pipe (gulp.dest ('./')) .pipe (git.commit ('Release a' + gulp. env.type + '-update')) // lit un seul fichier pour obtenir le numéro de version .pipe (filter ('package.json')) // Tagrez-le .pipe (tagversion ()) // Publiez les fichiers et les balises dans point de terminaison .pipe (shell (['git push origin develop', 'git push origin --tags'])););Il est possible de déployer tous les fichiers sur un serveur via rsync; c'est super rapide et confortable. Type gulp deploy dans votre terminal et après quelques secondes, vous avez le projet local sur le serveur. Vous n'avez pas besoin de glisser-déposer des dossiers manuellement. Automatiser toutes les choses. Vous définissez l'hôte et le chemin du dossier que vous souhaitez déployer dans build.config.js.
// Tâche: déployer du contenu statique // Description: déployer du contenu statique à l'aide de la commande shell rsync gulp.task ('deploy', function () return gulp.src (config.deployment.local.path, read: false). pipe (shell (['rsync' + config.deployment.rsync.options + "+ config.deployment.local.path + '/' + config.deployment.remote.host])));Vous avez écrit beaucoup de code et voici le résultat final! Vous préférerez peut-être avoir un fichier distinct pour chaque tâche, auquel cas vous pouvez le scinder. Dans ce cas, par souci de simplicité, nous afficherons tout dans un seul fichier Gulpfile:
var gulp = require ('gulp'), bump = require ('gulp-bump'), clean = require ('gulp-clean'), concat = require ('gulp-concat'), browserSync = require ('browser- sync '), cssmin = require (' gulp-cssmin '), filter = require (' gulp-filter '), git = require (' gulp-git '), gulpif = require (' gulp-if '), imagemin = require ('gulp-imagemin'), renommer = require ('gulp-rename'), sass = require ('gulp-sass'), shell = require ('gulp-shell'), tagversion = require ('gulp-tag -version '), uglify = require (' gulp-uglify '), config = require (' ./ build.config.json '); // Déclenche la production var; // Task: Clean: before // Description: Suppression des fichiers d'actifs avant d'exécuter d'autres tâches gulp.task ('clean: before', function () return gulp.src (config.assets.dest) .pipe (clean (force : vrai )) ); // Tâche: Gérer les scripts gulp.task ('scripts', function () return gulp.src (config.scripts.files) .pipe (concat ('application.js')) .pipe (gulpif (production, uglify ( ))) .pipe (gulpif (production, renommer (suffixe: '.min'))) .pipe (gulp.dest (config.scripts.dest)) .pipe (browserSync.reload (stream: true) );); // Tâche: Gérer les polices gulp.task ('fonts', function () return gulp.src (config.fonts.files) .pipe (gulp.dest (config.fonts.dest)) .pipe (browserSync.reload ( stream: true));); // Tâche: Gérer les images gulp.task ('images', function () return gulp.src (config.images.files) .pipe (gulpif (production, imagemin ())) .pipe (gulp.dest (config. images.dest)) .pipe (browserSync.reload (stream: true));); // Tâche: Manipuler Sass et CSS gulp.task ('sass', function () return gulp.src (config.scss.files) .pipe (sass ()) .pipe (gulpif (production, cssmin ())) .pipe (gulpif (production, renommer (suffixe: '.min'))) .pipe (gulp.dest (config.scss.dest)) .pipe (browserSync.reload (stream: true)); ) // Task: patternlab // Description: Construire des fichiers de laboratoire de patterns statiques via le script PHP gulp.task ('patternlab', function () return gulp.src (", read: false) .pipe (shell (['php core / builder.php -gpn '])) .pipe (browserSync.reload (stream: true));); // Tâche: styleguide // Description: Copier le styleguide-Folder de core / vers public gulp.task ('styleguide', function () return gulp.src (config.patternlab.styleguide.files) .pipe (gulp.dest (config.patternlab.styleguide.dest));); // tâche: BrowserSync // Description : Exécutez le serveur BrowserSync avec le mode fantôme désactivé gulp.task ('browser-sync', function () browserSync (serveur: baseDir: config.root, ghostMode: true, ouvrez: "external");); // Tâche: Regarder les fichiers gulp.task ('watch', function () // Regarder les fichiers du Pattern Lab gulp.watch (config.patternlab.files, ['patternlab'])); // Regarder les scripts gulp.watch (config .scripts.files, ['scripts']); // Regarder les images gulp.watch (config.images.files, ['images']); // Regarder Sass gulp.watch (config.scss.files, ['sa ss ']); // Regarder les polices gulp.watch (config.fonts.files, ['fonts']); ); // Task: Default // Description: Construit tous les éléments du projet une fois gulp.task ('default', ['clean: before'], function () production = false; gulp.start ('patternlab', 'styleguide ',' polices ',' sass ',' images ',' scripts ');); // Tâche: Lancez votre processus de production // Description: tapez 'gulp' dans le terminal gulp.task ('serve', function () production = false; gulp.start ('browser-sync', 'default', 'regarder' ); ); // Tâche: déployer du contenu statique // Description: déployer du contenu statique à l'aide de la commande shell rsync gulp.task ('deploy', function () return gulp.src (config.deployment.local.path, read: false). pipe (shell (['rsync' + config.deployment.rsync.options + "+ config.deployment.local.path + '/' + config.deployment.remote.host])); // Fonction: Relâcher ( Bump & Tagging) // Description: bump les versions de npm, créer un tag Git et transmettre à origin gulp.task ('release', function () production = true; renvoyer gulp.src (config.versioning.files) .pipe (type: gulp.env.type || 'patch')) .pipe (gulp.dest ('./')) .pipe (git.commit ('Libère un' + gulp.env.type + '- update ')) // lit un seul fichier pour obtenir le numéro de version .pipe (filter (' package.json ')) // Taglez-le .pipe (tagversion ()) // Publiez les fichiers et les balises sur le noeud final .pipe (shell ( ['origine git push develop', 'origine git push - tags'])););Nous avons maintenant besoin de notre fichier de configuration pour définir les différents chemins. Ce fichier est nécessaire pour gérer les chemins et la configuration du projet:
"root": "./public", "deployment": "local": "chemin": "public", "remote": "hôte": "VOTRE HÔTE", "rsync": "options": "-avzh --delete -e ssh", "assets": "base": "source / assets /", "dest": "public / assets /", "versioning": "fichiers": ["./package.json", "./bower.json"], "scripts": "base": "source / assets / javascripts /", "fichiers": ["source / assets /javascripts/**/*.js "]," dest ":" public / assets / javascripts / "," components ": " base ":" source / assets / components / "," scss ": "base": "source / assets / scss /", "fichiers": ["source / assets / scss / ** / *. scss"], "dest": "public / assets / stylesheets /", "polices ": " base ":" source / assets / fonts / "," fichiers ": [" source / assets / fonts / ** / * "]," dest ":" public / assets / fonts / "," images ": " base ":" source / assets / images / "," fichiers ": [" source / assets / images / ** / * "]," dest ":" public / assets / images / ", "patternlab": "styleguide": "fichiers": ["core / styleguide / **"], "dest": "public / styleguide /", "fichiers": ["source / _patterns / ** / *.moustache", "source / _patterns / ** / *. json", "source / _data / *. json"]
J'aime travailler avec une combinaison de Gulp et Pattern Lab. J'ai travaillé dans différentes équipes et jeté les bases de chaque projet. Les commentaires de chaque membre de l'équipe ont toujours été positifs en raison de la simplicité de son processus. Tout le monde a une surface solide, peut choisir le module et l’utiliser avec facilité. Pour des questions ou des commentaires s'il vous plaît voir la section commentaires ci-dessous.
