Share
Nous utilisons couramment des packages tiers dans les projets de conception Web.
Nous chargeons des fichiers CSS tiers à partir de projets tels que Bootstrap et Foundation, ainsi que de scripts tels que jQuery et Modernizr. De plus en plus, nous utilisons également des packages tiers dans le cadre de processus de développement, tels que des compilateurs pour préprocesseurs CSS ou des outils de nettoyage et de compression de code, afin de maximiser la vitesse de chargement et d'exécution de nos sites..
Traiter avec tous ces paquets peut rapidement devenir un gâchis de téléchargement manuel, de transfert de fichier et de mise à jour. Bien sûr, nous y travaillons, mais cela prend du temps et sa lourdeur laisse souvent des projets utilisant un code obsolète. Maintenant, il y a une meilleure façon, en utilisant des gestionnaires de paquets alimentés par ligne de commande.
Dans ce didacticiel, vous apprendrez à manipuler des packages tiers en saisissant simplement une poignée de commandes de deux à cinq mots..
Remarque: Si vous n'avez pas suivi le premier tutoriel de cette série, intitulé Notions élémentaires, vous trouverez utile de passer par là avant de commencer ici..
Afin de commencer à utiliser la ligne de commande pour gérer les packages tiers, la première chose dont vous aurez besoin est un "système de gestion de packages", ou "gestionnaire de packages". Les deux choix qui sont de loin les plus populaires parmi les concepteurs Web à l'heure actuelle sont npm et Bower, et ce sont les systèmes que vous allez apprendre à utiliser aujourd'hui..
Vous avez peut-être entendu parler de Node.js, un ensemble de fonctionnalités basées sur JavaScript qui peuvent tout alimenter, des plateformes de blogues aux IDE en passant par le codage, en passant par les centres multimédias et les systèmes d'exploitation complets..
En plus de l'installation de Node.js, le gestionnaire de paquets npm est un système extrêmement utile que vous verrez souvent utilisé dans cette série..
Contrairement à ce que vous pourriez penser, npm ne ne pas signifie «Node Package Manager» (Gestionnaire de paquets de nœuds). Officiellement, il signifie “Npm n'est pas un acronyme” et au sommet du site, vous verrez de petites blagues récurrentes à chaque rafraîchissement, comme «ne piquez jamais les singes» et «les tritons défilent majestueusement».
À partir de ce moment, npm fournit un accès à et la gestion de 127 664 paquets conçus pour différents types d’objets. Parmi les éléments utiles pour la conception Web, vous trouverez des packages tels que:
Pour les besoins de ce didacticiel, nous utiliserons npm en association avec Node.js. Il s’agit toutefois d’une entité indépendante pouvant être utilisée avec d’autres systèmes, tels que le nouvel IO.js..
En tant que débutant, je vous recommande de suivre les tutoriels utilisant Node.js, mais vous voudrez peut-être explorer d'autres options plus tard..
Mon introduction à l'utilisation de la ligne de commande pour la gestion des paquets tiers est en réalité venue de Bower. Quelqu'un m'en a informé en disant simplement
“Avez-vous essayé Bower? C'est génial! "
Je ne savais pas à quoi ça servirait, alors je suis allé sur www.bower.io et un coup d'œil à la liste des forfaits disponibles a suffi pour que l'ampoule s'éteigne.
La bibliothèque de paquets bower comprend des éléments tels que:
Il y a de grandes chances que vous utilisiez régulièrement au moins un ou deux de ces packages dans vos projets. Bower vous permet de continuer plus rapidement et plus facilement.
Dans certains cas, vous trouverez peut-être qu'un package est disponible à la fois sur npm et Bower. Si oui, quelle version devriez-vous utiliser?
Ces deux options installeront et mettront à jour les paquetages aussi rapidement que l'autre. Il n'y a pas de règles strictes à utiliser, et au final, vous développerez votre propre façon de faire les choses. Je vais donc vous donner une règle générale sur laquelle vous pouvez baser vos décisions pour l'instant..
Du point de vue de la conception Web, la différence réside vraiment dans la façon dont vous utiliserez les packages. Les deux cas d'utilisation typiques que vous allez utiliser concernent le déploiement frontal par rapport à l'utilisation en développement..
Bower est conçu pour la gestion des paquets frontaux, alors choisissez-le si vous recherchez quelque chose que les visiteurs du site consommeront via un navigateur..
D'autre part, les packages npm seront le choix à utiliser si vous n'utilisez qu'un package dans le cadre de votre processus de développement et qu'il ne sera pas inclus dans le produit fini..
Heureusement, l’installation de npm est assez simple car elle est fournie avec le programme d’installation de Node.js. Rendez-vous sur http://www.nodejs.org et téléchargez le programme d'installation de votre plate-forme. Installez-le sur votre machine et npm sera installé en même temps, alors vous pourrez continuer.
Important! Même si Node.js est déjà installé sur votre système, suivez la procédure ci-dessus pour vous assurer que vous disposez de la version la plus récente. Si vous utilisez une version obsolète, certaines des étapes à suivre tout au long de cette série risquent de ne pas fonctionner..
Selon le site npm, il est probable qu'une version plus récente de npm soit disponible, à part celle fournie avec votre installation Node.js..
Pour vous assurer que vous utilisez la dernière version:
[sudo] npm installer npm -g
Git, avec Node.js et npm, est une condition préalable à l’utilisation de Bower. Git est également une condition préalable à certains des autres packages orientés conception web que vous voudrez utiliser, alors mettons tout cela au clair sur votre système avant de poursuivre..
Pour les utilisateurs OSX, vous voudrez peut-être accéder au site Web principal de Git, récupérer le programme d'installation binaire et l'exécuter comme n'importe quel autre programme d'installation: http://git-scm.com/download/mac.
Pour utiliser Bower sous Windows, vous aurez besoin d’une version spécifique de Git pour Windows appelée msysGit. Frappé le Télécharger Cliquez sur le bouton et récupérez le programme d'installation, mais ne l'exécutez pas encore: http://msysgit.github.io
La raison pour laquelle j’ai dit de ne pas l’installer pour le moment, c’est que vous devrez faire attention à choisir le bon paramètre lors de l’exécution du programme d’installation. Lorsque vous voyez l'écran ci-dessous, assurez-vous de vérifier Exécuter Git à partir de l'invite de commande Windows.
Pour plus d'informations sur l'installation de msysGit en tant que prérequis pour Bower, voir: Remarque pour les utilisateurs de Windows..
Bower peut être installé via npm en exécutant la commande suivante:
[sudo] npm installer -g bower
Les utilisateurs de Mac, parce que nous utilisons le -g drapeau pour installer Bower globalement rappelez-vous que vous aurez probablement besoin d'inclure sudo au début de la commande, entrez votre mot de passe lorsque vous y êtes invité.
Npm et Bower travaillent tous deux avec des fichiers de manifeste spécialisés contenant des informations sur un projet et une liste des packages qu'il utilise. Avec les projets npm, ce fichier s'appelle «package.json» et dans les projets Bower, il s'appelle «bower.json». Le moyen le plus simple de créer ces fichiers est d’utiliser le init commande associée à chacun. Faisons-le maintenant.
Avec votre terminal pointé sur le dossier racine de votre projet, exécutez cette commande:
npm init
Cela vous posera une série de questions auxquelles vous pouvez répondre dans le terminal, en fournissant les informations à partir desquelles votre fichier «package.json» sera créé..
En savoir plus sur le npm init commande à: https://docs.npmjs.com/cli/init
Encore une fois, avec votre terminal pointé sur le dossier racine de votre projet, exécutez cette commande:
bower init
Comme pour le processus d’initialisation de npm, vous devrez répondre à une série de questions et vos réponses formeront votre fichier «bower.json»..
En savoir plus sur le bower init commande à: http://bower.io/docs/creating-packages/#bowerjson
Avec le projet initialisé, vous êtes prêt à importer des packages. Pour ce faire, vous devez trouver les packages que vous souhaitez utiliser via npm ou Bower..
Vous devez effectuer la recherche au bon endroit, car vous devez connaître le nom correct du paquet dans les écosystèmes npm ou Bower pour pouvoir l’installer et le mettre à jour..
Vous pouvez rechercher les packages que vous souhaitez utiliser avec npm via la barre de recherche en haut de leur page d'accueil..
Il est également possible de rechercher directement via la ligne de commande avec recherche npm , Cependant, je trouve personnellement plus facile de trouver ce que je cherche directement sur le site npm.
Lorsque vous trouvez le paquet que vous voulez utiliser, notez le nom du paquet.
La recherche de paquets Bower peut être effectuée via http://bower.io/search/.
Comme avec npm, notez le nom du paquet que vous voulez utiliser une fois que vous l'avez trouvé..
Une fois que vous avez trouvé le paquet que vous souhaitez utiliser, vous êtes prêt à l'installer. C'est ici que vous utiliserez le nom du paquet que vous avez noté. Dans les instructions ci-dessous, utilisez ce nom partout où vous voyez
Pour installer localement un paquet, c'est-à-dire juste dans votre dossier de projet, exécutez:
npm installer
Le package sera téléchargé dans un sous-dossier nommé «node_modules», le rendant disponible pour une utilisation dans votre projet. Par exemple:
En plus d'installer les packages localement, vous pouvez également installer les packages npm globalement..
Les packages installés localement ne sont utilisables que dans le contexte de votre projet, mais les packages installés globalement peuvent être utilisés à partir de n’importe où sur votre ordinateur. Par exemple, une fois le paquet «less» installé globalement, vous pouvez l’utiliser pour compiler n’importe quel document «.less», n’importe où dans le système..
Pour installer globalement un paquet, attachez le -g drapeau à votre commande:
[sudo] npm install-g
Le processus d'installation des packages Bower est presque identique à celui de npm, à l'aide de la commande suivante:
bower installer
La différence est que les packages Bower sont placés dans un sous-dossier nommé «bower_components», par exemple:
Étant donné que vous utiliserez Bower pour déployer des packages front-end dans des projets spécifiques, toutes vos installations peuvent être effectuées localement. Vous n'avez donc pas besoin d'utiliser la -g drapeau.
Si vous souhaitez partager ou même simplement dupliquer et déplacer un projet dans lequel vous avez utilisé npm ou Bower, la gestion des dépendances est une excellente chose à connaître. Laisse moi expliquer pourquoi.
Vous vous souviendrez des fichiers de manifeste que vous avez créés précédemment; “Package.json” et “bower.json”. Dans chacun de ces fichiers, vous pouvez ajouter une liste de paquetages sur lesquels votre projet dépend..
Vous avez déjà vu comment les packages npm sont placés dans un dossier nommé «npm_modules» et Bower dans «bower_components». La chose intéressante est que si vous souhaitez partager votre projet, vous pouvez complètement omettre ces deux dossiers, à condition que vos dépendances soient répertoriées dans vos fichiers de manifeste..
Cela peut facilement vous faire économiser quelques centaines de mégaoctets, ce qui facilite grandement le déplacement de votre projet..
Lorsque quelqu'un d'autre prend en main votre projet, il peut l'exécuter. npm installer et tous les paquets listés dans le fichier “package.json” seront automatiquement téléchargés dans un nouveau dossier “npm_modules”.
De même, la commande bower installer téléchargera automatiquement toutes les dépendances répertoriées dans le fichier «bower.json» et les placera dans un nouveau dossier «bower_components».
Il existe deux types de dépendances:
Dépendances de la production - dans le contexte de la conception Web, cela fait référence aux packages qui seront déployés en amont, par exemple. Modernisation pour la compatibilité entre navigateurs.
Dépendances de développement - dans le contexte de la conception Web, cela fait référence aux packages utilisés lors du développement, par exemple. MOINS pour la compilation de fichiers .less.
Bower et npm vous permettent de spécifier des dépendances de production et de développement. Toutefois, comme indiqué précédemment, vous utiliserez Bower pour les packages front-end et npm pour les packages de développement. En tant que tels, nous allons définir vos packages Bower comme des dépendances de production et vos modules npm comme des dépendances de développement..
La méthode de définition des dépendances est la même dans npm et Bower, à savoir l’ajout d’un indicateur à la commande que vous utilisez pour installer un package..
Pour définir un package en tant que dépendance de développement, ajoutez le --save-dev drapeau, par exemple.
npm installer--save-dev
Le paquet sera installé de la même manière que vous l'avez déjà vu, mais il sera ajouté à la liste devDependencies dans votre fichier “package.json” comme ceci:
Pour définir un package en tant que dépendance de production, ajoutez le --enregistrer drapeau, par exemple.
bower installer--enregistrer
Dans ce cas, le package sera ajouté à la liste des les dépendances dans le fichier «bower». comme ceci:
Remarque: lors de l’installation globale des paquets npm avec le -g drapeau, vous n'avez pas besoin de vous inquiéter d'utiliser --enregistrer ni --save-dev drapeaux.
La mise à jour des packages est également une commande d'une ligne pour Bower et npm..
Pour les packages installés localement, exécutez la commande suivante dans le dossier racine de votre projet où se trouve votre dossier «node_modules»:
npm update
Pour mettre à jour les packages installés globalement, ajoutez le -g drapeau:
[sudo] npm update-g
Vous pouvez également laisser le nom du paquet afin que vous puissiez mettre à jour tous vos paquets en même temps..
Pour mettre à jour tous les packages d'un projet spécifique, pointez votre terminal sur son dossier racine et exécutez:
npm update
Et pour mettre à jour tous vos packages installés globalement, exécutez:
[sudo] npm update -g
La mise à jour des packages Bower est essentiellement identique à celle de npm. Depuis le dossier racine de votre projet, celui qui contient votre dossier «bower_components», exécutez cette commande:
mise à jour de bower
La dernière version sera automatiquement téléchargée et ajoutée dans votre dossier «bower_components»..
Une fois vos paquets installés, vous voulez probablement savoir comment vous pouvez les utiliser, à droite?
Avec les packages Bower, le processus peut être identique à celui que vous utiliseriez pour extraire des actifs normalement, c.-à-d. Via scénario ou lien éléments de votre code HTML, chargement de fichiers directement à partir de votre dossier «bower_components».
Cependant, ce n'est pas optimal et il existe de meilleures façons de s'y prendre. Par exemple, vous pouvez fusionner tous les fichiers JS que vous utilisez depuis vos packages Bower en un seul fichier compressé et le charger à la place..
Vous verrez une démonstration de la procédure à suivre dans le prochain tutoriel Automation with Task Runners..
Les packages installés via npm seront généralement utilisés via des scripts de ligne de commande ou de gestionnaire de tâches..
Différents packages sont livrés avec leur propre ensemble de commandes intégrées que vous pouvez utiliser pour toutes sortes de tâches différentes telles que la compilation, la compression, la combinaison et bien plus encore. Ces tâches spécifiques à un paquet peuvent à leur tour être automatisées en configurant des exécuteurs de tâches pour exécuter plusieurs tâches à la fois..
Vous apprendrez à utiliser les packages npm de ces deux manières au cours des tutoriels suivants de cette série..
Nous verrons ensuite comment vous pouvez utiliser la ligne de commande pour ajouter une nouvelle couche d'efficacité à votre code frontal, à la fois dans son développement et dans son exécution..
Vous apprendrez à utiliser la ligne de commande pour la compilation de préprocesseur, le préfixage automatique de CSS, l'optimisation de fichiers JS et CSS et la compilation de raccourcis HTML et de modèles..
Je vous verrai dans le prochain tutoriel, Mise sous tension du code frontal.
Accentsconagua