La ligne de commande pour la conception Web Comprendre les bases

Il vous faut juste quelques éléments pour vous préparer à toutes les tâches de conception de sites Web que vous pouvez effectuer avec la ligne de commande. De nombreuses introductions génériques à la ligne de commande se concentreront sur des tâches telles que la création de dossiers, le déplacement de fichiers, la navigation dans votre système, etc. Je trouve qu'avec un focus de conception web, j'utilise rarement ces types de commandes.

Lorsque j'ai commencé à apprendre la ligne de commande, j'ai également rencontré de nombreux tutoriels qui sautaient souvent dans des instructions telles que «Tapez blahdee blah blah dans votre terminal» ou «Exécuter le bip de commande bloop de la commande». , "Attendez une minute, quel est mon terminal, où puis-je le trouver, comment puis-je l'ouvrir et comment l'utiliser?"

Dans ce tutoriel, nous allons nous assurer que vous n'avez pas le même problème. Nous allons commencer au tout début. Vous apprendrez tous les rudiments du travail avec un terminal ou une invite de commande, notamment son ouverture, sa commande, l'exécution de commandes, la répétition de commandes, le ciblage du dossier de projet lors de l'exécution de commandes et la gestion des erreurs les plus courantes message que vous verrez.

Cette série fournira les étapes spécifiques nécessaires pour les gars Linux désolé pour Mac et Windows. Cependant, je suppose que le simple fait d’être un utilisateur de Linux vous familiarisera probablement déjà avec la ligne de commande. En plus de cela, étant un système «'nix», la majorité des commandes Mac sont identiques sous Linux, vous devriez donc pouvoir suivre de toute façon.

Une note sur les applications graphiques

Je sais ce que vous pensez peut-être, et oui, il est possible d'utiliser des applications à interface graphique pour gérer certains de ces types de processus; Je le fais souvent moi-même. Cependant, les interfaces graphiques conçues pour tout le monde sont nécessairement taille unique solution, donc si vous trouvez que vous voulez faire quelque chose qu'une application ne fournit pas, vous êtes coincé.

Au moment où vous aurez suivi les didacticiels de cette série, vous aurez le savoir-faire nécessaire pour lancer vos propres projets basés sur la ligne de commande, à tout moment et de la manière dont vous en aurez besoin..

Quelle est la ligne de commande?

En un mot, la ligne de commande vous permet d’éviter de travailler avec une interface visuelle afin de vous permettre d’acquérir plus de profondeur dans la façon dont les choses sont traitées et d’avoir plus de contrôle..

Pour vous donner une idée de l’arrière-plan, la première façon pour vous d’interagir avec eux, lors de l’arrivée des ordinateurs sur la scène, consistait à utiliser des commandes typées traitées par des interfaces de ligne de commande (CLI). Des interfaces utilisateur graphiques (interfaces graphiques) ont finalement émergé, donnant naissance à l’interaction visuelle «pointer-cliquer» à laquelle nous sommes habitués dans les systèmes d’exploitation et les logiciels actuels..

Dans le monde de la conception Web, les choses ont évolué dans le sens opposé. Pour commencer, presque tous nos outils étaient des logiciels basés sur une interface graphique. Ce n’est que récemment que les solutions basées sur la CLI pour les problèmes de conception Web sont devenues suffisamment accessibles pour que le gain en vaille vraiment la peine d’apprendre à les utiliser..

La première chose à comprendre à propos de la ligne de commande est que, pour l’utiliser, vous avez besoin d’un programme spécialisé pour taper vos commandes.. 

Plusieurs options sont disponibles, mais dans cette série, nous n'utiliserons que les programmes par défaut fournis avec Mac et Windows. Sur Mac, le programme utilisé avec la ligne de commande s'appelle «Terminal» et, sous Windows, «Invite de commandes»..

Comment ouvrir un terminal / une invite de commande

En fait, rechercher et exécuter le terminal / l'invite de commande n'est pas immédiatement évident si vous ne l'avez jamais utilisé auparavant. Voici comment le faire sur Mac et Windows.

Sur Mac

Sur Mac, le moyen le plus simple d’ouvrir un terminal consiste simplement à aller sur votre Launchpad et à rechercher Terminal Là.

Le terminal sur Mac ressemble à ceci:

Une fois que vous l'avez en cours d'exécution, épinglez cette ventouse à votre quai. Croyez-moi, vous allez le vouloir là-bas.

Sur Windows

Dans le langage Windows, la ligne de commande se fait via Invite de commande

Sous Windows 8: à partir de l'écran de démarrage, accédez à applications, et sous Système Windows choisir Invite de commande.

Vous pouvez également appuyer sur les fenêtres clé plus R pour ouvrir une fenêtre d'exécution. Dans le champ marqué Ouvrir type cmd et cliquez sur le D'accord bouton pour lancer l'invite de commande.

L'invite de commande sous Windows ressemble à ceci:

Note rapide: Par souci de brièveté, au lieu de dire «terminal / ligne de commande» tout au long de la série, je vais simplement utiliser le mot «terminal» à partir de maintenant, à moins de faire référence à des instructions spécifiques à Windows..

Lancer et répéter des commandes

Pour exécuter une commande, attendez qu’une invite s’affiche. Sur Mac, vous pouvez reconnaître l’invite par le $ signe, il se termine par, et sous Windows, il se termine par un > signe:

Invite sur un terminal MacInvite sur l'invite de commande Windows

Lorsque vous voyez une invite, vous pouvez taper votre commande puis appuyer sur Entrée pour l'exécuter:

Une chose très pratique à savoir est que si vous voulez répéter une commande, vous pouvez appuyer sur les flèches haut et / ou bas de votre clavier pour faire défiler les commandes précédemment entrées..

Vous constaterez qu'il y a souvent des commandes que vous voudrez exécuter plus d'une fois et qu'il vous suffit de vous déplacer vers le haut, puis d'appuyer sur entrer est beaucoup plus rapide que de retaper des commandes.

Ouverture d'un terminal dans un dossier spécifique

Pour la plupart des tâches de conception Web que vous effectuerez à l'aide de la ligne de commande, vous aurez besoin que votre terminal soit dirigé vers le dossier contenant votre projet.. 

Votre terminal affichera le nom du dossier dans lequel vous travaillez actuellement:

Il est possible de naviguer librement dans votre ordinateur à l’aide de la CD commande, abréviation de "change directory". Cependant, vous le trouverez probablement beaucoup plus facile si vous pouvez simplement cliquer avec le bouton droit de la souris dans votre dossier de projet, puis ouvrir un terminal à partir de là, déjà au bon endroit..

Personnellement, je le fais tout le temps, même si utiliser la commande «cd» serait probablement plus rapide, car le cerveau de mon concepteur préfère simplement travailler de cette façon. Voici comment vous pouvez le faire sur chaque système d'exploitation.

Sur Mac

J'utilise une application appelée XtraFinder (gratuite et dotée de nombreuses fonctionnalités très utiles) qui vous permet d'ajouter une Nouveau terminal ici option du menu contextuel dans le Finder.

Sur Windows

Maintenez Décalage Cliquez avec le bouton droit de la souris dans le dossier de votre projet. Dans le menu contextuel, une option s’affiche: Ouvrez la fenêtre de commande ici.

Sous Windows, c’est toujours ainsi que j’ouvre une invite de commande, car c’est la manière la plus simple..

EACCES Vous n'avez pas la permission? Sudo.

L’un des problèmes que vous pouvez rencontrer fréquemment sur Mac est l’un ou l’autre type de message d’erreur contenant les lettres. EACCES.

Il sera souvent accompagné de quelque chose comme «S'il vous plaît essayez de réexécuter cette commande en tant que root / administrateur."

Si, ou quand, vous voyez cela, cela signifie simplement que vous essayez de terminer une tâche qui nécessite des privilèges d'accès élevés. Ce système est en place pour vous assurer que personne ne peut modifier votre machine sans autorisation..

Le moyen le plus simple de vérifier que vous êtes bien autorisé est d’ajouter le mot sudo au début de votre commande, qui est l'abréviation de «super utilisateur do».

Il vous sera ensuite demandé de saisir votre mot de passe avant de pouvoir continuer..

Quand vous ajoutez sudo à une commande, vous agissez en tant que «super utilisateur» du système plutôt que comme un ancien utilisateur. Avec ces privilèges élevés, vous devriez trouver que la commande que vous essayez d'exécuter fonctionne parfaitement.

Alternatives au sudo

Vous devez savoir qu’en général, il existe des moyens autres que sudo pour contourner les erreurs de niveau d'accès, telles que la modification de la configuration des autorisations sur votre ordinateur. Cependant, les étapes généralement requises pour ces types de processus dépassent un peu le niveau de base que nous couvrons ici.. 

Vous serez bien à utiliser sudo dans le contexte que nous couvrirons dans cette série. Cela dit, lorsque vous serez plus à l'aise avec la ligne de commande, vous voudrez peut-être rechercher ces autres options..

Voici un processus à mettre en favori pour la fixation ultérieure des autorisations npm, dont la pertinence apparaîtra dans un didacticiel ultérieur..

Comment l'utilisation de sudo sera indiquée dans cette série

Où que vous deviez utiliser sudo dans une commande, je vais écrire la commande comme suit:

[sudo] commande ici

Cela ne signifie pas que vous devriez littéralement taper [sudo] avec les crochets inclus, mais plutôt que vous pouvez ou non avoir besoin d'utiliser sudo, c'est à dire.

commande sudo ici

ou

commander ici

En cas de doute, vous pouvez toujours essayer la commande sans sudo et essayez à nouveau avec, si vous voyez un EACCES Erreur.

Dans le prochain tutoriel

Dans le prochain tutoriel, nous allons passer directement aux techniques que vous pouvez utiliser dans vos flux de travaux de conception Web existants, en expliquant comment utiliser la ligne de commande pour la gestion de packages tiers..

Vous apprendrez à vous familiariser avec deux des systèmes de gestion de paquets les plus répandus sur le Web et à les utiliser pour rechercher, installer et mettre à jour des packages à utiliser dans vos projets..

on se verra là bas!