Attention: il s'agit d'un screencast sinueux de niveau intermédiaire dans lequel nous examinons le code qui alimente un processus de construction pour un site. Nous n'écrivons aucun code.
Un «processus de construction» est tout ce qui se passe entre le code que vous écrivez et le code qui sort sur un site Web en direct. Nous avons déjà parlé de l'utilisation de Grunt pour cela. Sass est traité, les actifs sont combinés, la minification et l'optimisation se produisent, etc. Il y a des choses infinies qu'un processus de construction peut faire pour vous.
J'ai travaillé avec Katie Kovalcin sur la création d'un nouveau site personnel pour elle. C'est une expérience pour nous deux pour apprendre de nouveaux processus et essayer de nouvelles choses. Dans ce cas, j'utilise Jekyll pour la première fois et j'automatise un système SVG pour la première fois.
Au moment du screencast, je suis en plein milieu de tout, mais j'ai fait fonctionner le système de construction sans problème, alors j'ai pensé que c'était le bon moment pour partager ça. Je pense toujours que c'est le bon moment pour partager - juste au moment où quelque chose clique pour vous.
Les choses se passent:
- Grunt exécute toutes les tâches.
- Le site est en cours de construction avec Jekyll. Cela signifie qu'il traite les mises en page et le contenu en pages Web complètes. Lorsque le contenu ou la mise en page changent, Grunt exécute la version Jekyll.
- Jekyll exécute également le serveur local.
- Sass est le préprocesseur CSS. Lorsqu'un fichier Sass change, Grunt exécute la complication Sass. Ensuite, Grunt exécute Autoprefixer sur le résultat. Ensuite, Grunt exécute à nouveau la compilation Jekyll pour s'assurer que tous les nouveaux éléments sont utilisables par le site traité.
- Le site utilise un système SVG. Pour les icônes, mais aussi le logo, et qui-sait-quoi-tout le reste d'ici la fin. Les fichiers SVG sont tous séparés dans un dossier «svg». Lorsque l'un d'entre eux change, Grunt exécute la tâche svgstore pour les traiter tous ensemble. Ensuite, Grunt exécute la version Jekyll pour que tout le SVG actuel soit disponible sur le site.
- Comme il s'agit d'un dépôt sur GitHub et que les pages GitHub prennent en charge Jekyll, nous pouvons automatiquement obtenir une version hébergée en direct de ce site. Nous pouvons également pointer un autre domaine sur ce site.