Share
Pendant longtemps, le travail avec la ligne de commande était considéré comme hors du domaine des concepteurs de sites Web. Il a été utilisé presque exclusivement pour des tâches telles que l'administration du serveur et la gestion de fichiers, entre autres choses qui n'ont rien à voir avec les processus quotidiens du concepteur Web standard..
C’était peut-être le cas dans le passé, mais aujourd’hui, il ne pouvait pas être plus éloigné de la vérité..
De nos jours, des milliers d'outils incroyables basés sur la ligne de commande sont disponibles spécifiquement pour les langages frontaux et les flux de travail. Les énormes avantages qu’ils offrent signifient que l’utilisation de la ligne de commande devient une compétence de plus en plus essentielle pour les concepteurs Web..
Quelques outils de ligne de commande fréquemment utilisésJ'admets que, quelque temps après avoir rencontré ce type d'outils de conception Web, j'étais un peu «phobique en ligne de commande». J'étais influencé par l'idée «pour les programmeurs pas par les concepteurs» et j'avais toujours cherché d'autres options. au lieu d'essayer la ligne de commande.
Enfin, j'ai finalement franchi le pas lorsqu'un projet que je souhaitais réellement utiliser était une interaction indispensable par le biais de la ligne de commande. J'étais un peu intimidé au début, mais à ma très agréable surprise, je me suis vite exclamé:
"C'est génial, je ne sais pas pourquoi je n'ai pas commencé à apprendre il y a bien longtemps!"
Aujourd'hui, j'utilise la ligne de commande dans presque tous les projets de conception Web et je ne m'en passerais pas. C'est incroyablement utile à presque toutes les étapes d'un processus de conception Web typique.
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 «Démarrer avec la ligne de commande» si ma vie en dépendait. Si tu n'apprends jamais comment mkdir ou CD ou ls ça n'a pas d'importance. La vérité est qu’en tant que concepteur Web, vous n’avez vraiment pas besoin de ce genre de choses. 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 traite pas de «comment exécuter des commandes obscures pour des tâches que vous ne faites jamais». Il ne s'agit pas non plus d'un type de transaction «processus de développement compliqué facilité pour les concepteurs». Ceci est une série spécialement pour les concepteurs Web, en vous montrant comment utiliser des outils extrêmement utiles, en particulier pour les projets de conception Web.
Une fois que vous commencez à intégrer la ligne de commande à vos processus de conception, vous ouvrez un tout nouveau monde d’options, vous épargnerez une partie de votre temps précieux et, je vous le promets, vous ne regarderez jamais en arrière..
Au cours de cette série de didacticiels, vous découvrirez des processus basés sur la ligne de commande susceptibles de changer votre approche permanente de la conception Web..
Après avoir commencé à vous familiariser avec les bases, nous passons directement aux compétences pratiques que vous pouvez utiliser immédiatement. Lorsque vous examinez chacun des sujets que nous traiterons, vous commencez à voir une image qui explique pourquoi la ligne de commande est un outil indispensable pour la conception Web..
Passons rapidement en revue les sujets que nous aborderons au cours de cette série. Il y a cinq domaines principaux:
Les concepteurs Web utilisent souvent des packages tiers tels que jQuery, Bootstrap, Modernizr, Font Awesome, Normalize.css et une longue liste d’autres. Avant la ligne de commande, utiliser ces packages externes signifiait normalement:
La gestion manuelle des paquets est lente et difficile à manier, mais la ligne de commande appartient au passé.
Vous pouvez extraire des paquets directement dans vos projets en tapant quelques mots, comme:
bower installer jquery
Vous pouvez garder les paquets à jour en tapant un simple jeu de mots comme:
bower update jquery
Plus besoin de télécharger manuellement des packages sur le Web ou de les mettre à niveau manuellement lorsqu'ils sont modifiés, ce n'est qu'un petit aperçu de ce que vous pouvez faire grâce à la gestion de packages en ligne de commande.
Les trois langues que vous êtes le plus susceptible de voir utilisées dans tout projet de conception Web sont CSS, HTML et JavaScript. Les outils de ligne de commande ouvrent de nouvelles voies pour rendre notre production et notre livraison de code dans ces langages plus efficaces et plus performantes..
Une des choses les plus puissantes que nous puissions utiliser en ligne de commande avec CSS est de compiler des pré-processeurs, tels que Stylus, Sass / SCSS et LESS. Avec la ligne de commande, vous pouvez rapidement compiler n’importe quel fichier de préprocesseur en saisissant quelques mots. Vous pouvez également configurer la compilation automatique pour que vos fichiers CSS soient recompilés chaque fois que vous modifiez vos fichiers préprocesseur..
Grâce à la ligne de commande, nous pouvons également améliorer nos flux de travaux CSS avec des éléments tels que le préfixage automatique, le nettoyage et la compression de fichiers. De la même manière, nous pouvons également optimiser notre JavaScript avec la concaténation et la minification de fichiers.
Et pour HTML, nous avons accès à des langages comme Jade, qui nous donne à la fois la possibilité d'écrire du HTML en sténographie et la possibilité de développer des systèmes de templates simples mais sophistiqués nous évitant d'avoir à réécrire des morceaux de code qui se répètent au fil des projets..
Être capable de compiler en CSS avec quelques mots, puis de minify JavaScript avec quelques mots est génial. Mais quand les choses commencent vraiment à devenir super puissantes, c'est quand vous pouvez le faire tout votre projet a besoin en une seule commande.
En utilisant quelque chose appelé un «coureur de tâches», une commande de mot unique comme gorgée ou grognement peut être paramétré pour compiler vos fichiers préprocesseurs, puis combiner, auto-préfixer, nettoyer et compresser le CSS résultant, après quoi vos fichiers Jade sont compilés au format HTML, et vos fichiers JS concaténés et minifiés, le tout en quelques secondes.
Vous pouvez également configurer des utilisateurs pour gérer ces tâches en mode mains libres. Après avoir exécuté une commande comme regarder gulp ou grunt regarder vous pouvez simplement travailler sur les fichiers bruts de votre projet, tandis que, 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, il n’ya donc pas de limite à la manière dont vous pouvez configurer vos projets. Ajustez simplement les choses en fonction de chaque situation, au besoin.
Le rechargement en direct vous permet de retirer votre doigt du bouton d'actualisation et de vous concentrer sur l'obtention d'un retour fluide et en temps réel sur vos modifications de conception à mesure que vous les effectuez..
Une fois que vous avez automatisé les serveurs de tâches en place, vous pouvez ajouter une recharge directe directement dans le mixage, en l’intégrant dans la configuration que vous avez créée pour vos projets. Vous pouvez choisir exactement ce qui déclenche le rechargement en direct, qu’il s’agisse de la compilation du préprocesseur, des modifications du code HTML ou de tout autre choix..
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 s'exécutant sur votre ordinateur local. C’est formidable de s’assurer que tout fonctionne comme prévu sur http: // protocoles, par opposition à fichier:// les protocoles.
En plus de cela, vous apprendrez également à synchroniser votre navigateur. Vous obtiendrez une URL unique que vous pourrez insérer dans plusieurs navigateurs et les synchroniser ensemble. Par exemple, cliquez sur un bouton de navigation sur Chrome, puis voyez comment Firefox, Opera et Safari réagissent simultanément à la même action..
Cette synchronisation de navigateur n'est pas limitée à un seul appareil non plus. Vous pouvez également accéder à la même URL sur votre tablette, votre téléphone et tout autre appareil connecté sur la même connexion et faire en sorte que chacun affiche un aperçu synchronisé. Tout cela vient ensemble pour vous donner la configuration parfaite pour les tests multi-navigateurs et multi-périphériques.
Et comme vous le construisez en plus de la configuration de votre gestionnaire de tâches, tout se déroule en direct avec une commande à deux mots comme grunt start ou gulp start.
Échafauder manuellement de nouveaux projets peut être un peu pénible. Obtenir la configuration complète de la structure de dossiers et de fichiers ainsi que 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 échafauder toutes sortes de projets en quelques secondes, ce qui est idéal lorsque vous souhaitez utiliser des infrastructures tierces et du code de démarrage populaires tels que Foundation, Bootstrap, HTML5 Boilerplate et Google Web Starter Kit..
Avec les méthodes que nous couvrirons, vos projets nouvellement scaffoldés auront non seulement tout le code dont ils ont besoin, mais leurs coureurs de tâches préconfigurés, de sorte que des éléments tels que la compilation automatique et les aperçus localhost sont prêts à l'emploi..
À ce moment-là, si vous êtes prêt, je vous verrai dans le premier tutoriel.!
Accentsconagua