La ligne de commande pour la conception Web: Introduction

Pendant longtemps, travailler avec la ligne de commande a été considéré comme étant en dehors du domaine des concepteurs de sites Web. Il a été utilisé à peu près exclusivement pour des choses comme l'administration de serveur et la gestion de fichiers et toutes sortes de choses qui n'ont rien à voir avec les processus quotidiens du web designer moyen.

Cela a peut-être été le cas dans le passé, mais aujourd'hui, il ne pouvait pas être plus éloigné de la vérité.

De nos jours, il existe des milliers d'outils incroyables alimentés par ligne de commande disponibles spécifiquement pour les langues et les flux de travail frontaux. Les énormes avantages qu'ils offrent signifient tirer parti de la ligne de commande devient une compétence toujours plus essentielle pour les concepteurs de sites Web.

Je vais admettre, pendant un certain temps après que j'ai rencontré ces types d'outils de conception web, j'étais un peu 'phobique de la ligne de commande'. J'ai été influencé par l'idée «pour les programmeurs et non les concepteurs», et j'avais toujours cherché d'autres options au lieu de tenter la ligne de commande.

Puis, finalement, j'ai fait le grand saut quand un projet que je voulais vraiment utiliser l'interaction inévitablement nécessaire via la ligne de commande. J'étais un peu intimidé au départ, mais à ma très agréable surprise, je me suis vite retrouvé à m'exclamer:

'C'est génial, je ne sais pas pourquoi je n'ai pas commencé à apprendre il y a si longtemps!'

Aujourd'hui, j'utilise la ligne de commande dans presque tous les projets de conception web et je ne serais pas sans. Il est incroyablement utile dans presque toutes les étapes d'un processus de conception de sites Web.

À propos de cette série

Mais voici la chose, même maintenant je ne serais pas capable de faire la plupart des choses que vous trouverez dans un tutoriel typique de 'démarrage avec une ligne de commande' si ma vie en dépendait. Si vous n'apprenez jamais comment mkdir ou cd ou ls, cela n'a pas d'importance. La vérité est, en tant que concepteur de sites Web, vous n'avez vraiment besoin de rien de tout cela. Les seules compétences en ligne de commande dont vous avez besoin sont celles qui facilitent directement l'efficacité de vos projets de conception Web.

C'est pourquoi cette série ne parle pas de 'comment exécuter des commandes obscures pour des tâches que vous ne faites jamais'. Ce n'est pas non plus un 'processus de développement compliqué rendu facile pour les concepteurs'. Ceci est une série spécialement conçue pour les concepteurs de sites Web, vous montrant comment utiliser les outils qui sont incroyablement utiles spécifiquement pour les projets de conception de sites Web.

Une fois que vous commencez à intégrer la ligne de commande dans vos processus de conception, cela ouvrira un tout nouveau monde d'options, économiserez d'immenses portions de votre précieux temps et, promis, vous ne le regretterez jamais.

Pourquoi la ligne de commande est idéale pour la conception Web

À travers cette série de tutoriels, vous apprendrez les processus pilotés par une ligne de commande qui pourraient simplement changer la façon dont vous abordez la conception web en permanence.

Après avoir commencé avec les bases, nous passerons directement aux compétences pratiques que vous pouvez utiliser immédiatement. Lorsque vous jetez un coup d'œil à chacun des sujets que nous aborderons, vous commencerez à voir une image de la raison pour laquelle la ligne de commande est un outil incontournable pour la conception web.

Les principaux sujets couverts

Parcourons rapidement les sujets que nous aborderons au cours de cette série. Il y a cinq domaines principaux:

1. Apprivoiser les paquets tiers

Les concepteurs Web utilisent souvent des paquets tiers tels que jQuery, Bootstrap, Modernizr, Font Awesome, Normalize.css et une longue liste d'autres. Avant la ligne de commande, l'utilisation de ces paquets externes signifiait normalement:

1. Maintenir une liste de signets de site où vous pouvez télécharger la dernière version de chaque paquet.
2. Visiter manuellement ces sites Web pour télécharger des paquets chaque fois que vous en avez besoin.
3. Répétition du processus à chaque fois qu'un paquet a été mis à jour.
4. Transfert manuel de la version mise à jour dans tous les projets dans lesquels elle a été utilisée.

Traiter la gestion des paquets manuellement est lent et lourd, mais avec la ligne de commande qui appartient au passé.

Vous pouvez insérer des packages directement dans vos projets en tapant simplement quelques mots, par exemple:

Bower installer jquery

Vous pouvez garder les paquets à jour en tapant un ensemble simple de mots comme:

bower update jquery

Plus besoin de télécharger manuellement des packages à partir du Web ou de les mettre à niveau manuellement lorsqu’ils ont été modifiés, ce n’est là qu’un aperçu des tâches que vous pouvez effectuer via la gestion des packages de ligne de commande.

2. Mise sous tension du code frontal

Les trois langues les plus susceptibles d’être utilisées dans un projet de conception Web sont CSS, HTML et JavaScript. Les outils de ligne de commande ouvrent de nouvelles manières de rendre notre production et la livraison de code dans ces langues plus efficaces et plus puissantes.

L'une des choses les plus puissantes que nous pouvons utiliser en ligne de commande avec CSS consiste à compiler des préprocesseurs, tels que Stylus, Sass / SCSS et LESS. Avec la ligne de commande, vous pouvez rapidement compiler tout fichier de préprocesseur en tapant quelques mots. Vous pouvez également configurer une compilation automatique afin que vos fichiers CSS soient recompilés chaque fois que vous modifiez vos fichiers de préprocesseur.

Grâce à la ligne de commande, nous pouvons également améliorer nos flux de travail CSS avec des fonctions telles que le préréglage automatique, le nettoyage de fichiers et la compression. De la même manière, nous pouvons également optimiser notre JavaScript avec la concaténation et la minification des fichiers.

Et pour HTML, nous avons accès à des langages comme Jade, ce qui nous permet à la fois d’écrire du code HTML en abrégé et de développer des systèmes de modélisation simples mais sophistiqués pour éviter de réécrire des morceaux de code répétés dans les projets.

3. Automatisation avec des coureurs de tâches

Pouvoir compiler en CSS avec quelques mots, puis minimiser JavaScript avec quelques autres mots, c'est bien. Mais quand les choses commencent vraiment à devenir super puissantes, c'est quand vous pouvez faire tout ce que votre projet a besoin en une seule fois avec une seule commande.

En utilisant quelque chose appelé «runner», une seule commande de mot comme gulp ou grunt peut être configurée pour compiler vos fichiers de préprocesseur, puis combiner, autoprefixer, nettoyer et compresser le CSS résultant, après quoi vos fichiers Jade sont compilés en HTML et votre Fichiers JS concaténés et minifiés - le tout en l'espace de quelques secondes.

Vous pouvez également configurer des groupes de tâches pour gérer ces choses en mains libres pour vous. Après avoir exécuté une commande comme gulp watch ou grunt watch, vous pouvez simplement continuer à travailler sur les fichiers bruts de votre projet, alors qu’en arrière-plan, toute la compilation et l’optimisation sont gérées automatiquement pour vous.

Les coureurs de tâches sont complètement flexibles et peuvent être configurés comme vous le souhaitez, de sorte qu'il n'y a pas de limite à la manière dont vous pouvez configurer vos projets. Simplement affiner les choses en fonction de chaque ensemble de circonstances, au besoin.

4. Rechargement en direct, synchronisation du navigateur et test multi-périphérique

Le rechargement en direct vous permet de mettre le doigt sur ce bouton d'actualisation et de vous concentrer sur l'obtention de commentaires en temps réel sur vos modifications de conception.

Une fois l’automatisation en place avec les coureurs de tâches en place, vous pouvez ajouter un rechargement en direct directement dans le mixage, en le maillant dans la configuration que vous avez créée pour vos projets. Vous pouvez décider exactement de ce qui déclenche le rechargement en direct, que ce soit la compilation préprocesseur, les modifications HTML ou tout ce qui vous plait.

Dans le cadre de l'activation du rechargement en direct, vous obtenez également une prévisualisation du site sur un hôte local, c'est-à-dire une simulation d'un hôte Web exécuté sur votre ordinateur local. Ceci est idéal pour s'assurer que tout fonctionne comme prévu sur les protocoles https: //, par opposition aux file: //.

De plus, vous apprendrez également à synchroniser les navigateurs, en obtenant une URL que vous pouvez insérer dans plusieurs navigateurs et les synchroniser tous ensemble. Par exemple, cliquez sur un bouton de navigation dans Chrome, puis voyez comment Firefox, Opera et Safari répondent à cette même action simultanément.

Cette synchronisation du navigateur ne se limite pas à un seul périphérique. Vous pouvez également accéder à la même URL sur votre tablette, votre téléphone et tout autre appareil sur la même connexion et afficher chacun un aperçu synchronisé. Tout cela est réuni pour vous offrir une configuration parfaite pour les tests inter-navigateurs et inter-périphériques.

Et parce que vous construisez ceci en plus de la configuration de votre coureur de tâches, tout se passe en direct avec une commande de deux mots comme grunt start ou gulp start.

5. Nouveaux échafaudages

L'échafaudage manuel de nouveaux projets peut être pénible. Obtenir toute la configuration de votre structure de dossiers et de fichiers et tous les fichiers connectés et configurés pour fonctionner ensemble peut prendre beaucoup de temps.

En utilisant la ligne de commande, cependant, vous pouvez étoffer tous les types de projets en quelques secondes, ce qui convient parfaitement lorsque vous souhaitez utiliser des frameworks tiers et des codes de démarrage tels que Foundation, Bootstrap, HTML5 Boilerplate et Google Web Starter Kit.

Avec les méthodes que nous allons couvrir, vos projets nouvellement échafaudés auront non seulement tout le code dont ils ont besoin, mais leurs exécuteurs de tâches sont préconfigurés pour que des choses comme la compilation automatique et les prévisualisations de localhost soient prêtes à l'emploi.

Passer à autre chose

Alors, si vous êtes prêt, je vous verrai dans le premier tutoriel!