Début avec les outils de CLI de la fondation 6 & # x27;

Fondation 6 outils de ligne de commande Guide de démarrage

Foundation 6 fournit une variété de façons d'utiliser et d'outils. Vous pouvez télécharger des fichiers statiques ou utiliser le lancement de Yeti (une application de bureau pour Mac, la version Windows arrive bientôt).

On sait peu de choses que Foundation 6 fournit également un ensemble d'outils de ligne de commande, qui seront décrits dans cet article. La Fondation 6 est un cadre frontal très flexible qui possède de puissants outils de développement en plus de nombreuses fonctionnalités CSS évidentes et plugins JavaScript.

points clés

• Foundation 6 fournit un ensemble d'outils de ligne de commande qui donnent aux développeurs un plus grand contrôle sur le processus de construction, y compris la compilation SCSS, la connexion, la compression, l'optimisation d'image et les modèles.
• Pour utiliser l'outil CLI de Foundation 6, les développeurs doivent installer NodeJS, NPM, GIT, Gulp et Bower. Vous pouvez installer Foundation-Cli en utilisant npm install --global foundation-cli.
• La CLI de fondation utilise Gulp et Bower en arrière-plan. Gulp est une tâche longue dans les workflows de développement automatisé, tandis que Bower est un gestionnaire de packages Web qui permet aux développeurs de télécharger et d'installer des bibliothèques frontales à partir de la ligne de commande.
• En utilisant la Foundation CLI, les développeurs peuvent télécharger et installer des modèles vierges pour trois frameworks de fondation (sites, applications et e-mails). Ces modèles sont préconfigurés pour travailler avec Gulp et Bower.
• L'outil CLI Foundation est également préconfiguré avec Browsersync pour la synchronisation des tests de navigateur et le rechargement en temps réel. Cette fonctionnalité permet aux développeurs de visualiser les changements en temps réel sur plusieurs appareils et résolutions, améliorant ainsi l'efficacité de développement frontal.

Quand utilisez-vous l'outil CLI de Foundation?

Vous vous demandez peut-être, car vous pouvez utiliser des fichiers JavaScript et CSS statiques (qui fonctionnent très bien), pourquoi prendre la peine d'utiliser des outils CLI? Vous pouvez avoir besoin d'une structure standard et d'un processus facile à utiliser, ce qui est OK.

Je crois que vous pouvez atteindre vos objectifs de cette façon, mais je comprends que de nombreux développeurs veulent plus de contrôle sur le processus de construction. Cela inclut la compilation SCSS, la connexion, la compression, l'optimisation d'image et les modèles. Je préfère utiliser ces outils supplémentaires. Par conséquent, dans certains cas, les outils CLI peuvent être un meilleur choix.

Si vous utilisez fréquemment la ligne de commande et que vous ne savez pas ce que Foundation 6 propose à cet égard, ou si vous n'utilisez pas la ligne de commande et que vous pouvez vouloir apprendre quelque chose de nouveau, cet article est pour vous.

Soyez utilisé

Tout d'abord, vous devez installer des outils NodeJS et NPM (généralement installés avec NodeJS). Vous avez également besoin de Git, Gulp et Bower et Foundation-Cli utilisera tous ces outils. Vous pouvez exécuter la commande suivante pour installer:

<code class="language-bash">$ npm install --global gulp bower</code>

Sur certains systèmes, vous devrez peut-être l'accès des superutilisateurs, en particulier lors de l'installation de packages NPM à l'échelle mondiale, vous devrez donc peut-être utiliser sudo avant les commandes décrites dans cet article.

Installation de la fondation-Cli

Si vous avez déjà installé Foundation 5 CLI sur votre ordinateur, vous ne pouvez accéder qu'une seule commande (selon la configuration de votre environnement de ligne de commande). Par conséquent, il est préférable de supprimer d'abord l'ancien outil. Vous pouvez le faire en utilisant la commande suivante:

<code class="language-bash">$ npm install --global gulp bower</code>

et installez le nouvel outil CLI:

<code class="language-bash">$ gem uninstall foundation
$ npm uninstall --global foundation-cli</code>

Vous pouvez en savoir plus sur l'installation dans la documentation de la Fondation.

Si vous ne souhaitez pas installer Foundation-Cli sur votre système et que vous avez installé Gulp and Bower dans le passé, il suffit de cloner le référentiel contenant des modèles de fondation et d'utiliser les commandes Gulp et NPM au lieu de la commande de fondation. Tout doit être le même que lors de l'utilisation de Foundation-Cli.

Que propose Foundation CLI?

Comme mentionné précédemment, la CLI de fondation utilise Gulp et Bower en arrière-plan. Que sont Gulp et Bower? Gulp est une boîte à outils qui vous aide à automatiser les tâches fastidieuses ou longues dans votre flux de travail de développement. Ici, nous pouvons considérer la compilation SCSS, la compression, la connexion et également effectuer une compression d'image ou d'autres tâches utiles. Bower est un gestionnaire de packages Web qui vous permet de télécharger et d'installer des bibliothèques frontales à partir de la ligne de commande. Par exemple, l'installation de jQuery ne nécessite qu'une seule ligne de commande: bower install jquery.

Foundation CLI Téléchargez et installez des modèles vierges pour trois frameworks de fondation (sites, applications et e-mails). Tous ces modèles sont prêts à travailler avec Gulp et Bower et sont préconfigurés avec des tâches Gulp et des sources d'installation de bower. Ceci est similaire à des outils comme yeoman.

Utilisation de Foundation CLI

Après avoir installé Foundation-Cli, vous pouvez commencer à l'utiliser en exécutant la commande suivante:

<code class="language-bash">$ npm install --global foundation-cli</code>

Comme vous pouvez le voir, nous utilisons foundation au lieu de foundation-cli. De plus, nous ne regardons que les modèles Zurb Premium pour Foundation for Sites. Nous devons utiliser le logo --framework pour sélectionner le cadre correct, et nous devons également utiliser le logo --template pour sélectionner le modèle correct. Vous pouvez également choisir un modèle de base, mais je pense que les modèles avancés sont bien meilleurs si vous voulez y regarder de plus près.

Après l'installation, vous devez avoir un dossier de projet (le nom est fourni pendant le processus d'installation). De plus, toutes les dépendances doivent y être installées. Tout ce que vous avez à faire maintenant est d'aller dans le projet nouvellement créé et d'aller dans le dossier et d'exécuter:

<code class="language-bash">$ foundation new --framework sites --template zurb</code>

C'est la magie! Cela exécutera Gulp Build and Server Tâches ainsi que les commandes de montre. Cela signifie qu'il déclenche toutes les tâches Gulp configurées que vous pouvez voir dans votre code. Ainsi, lorsque vous exécutez cette commande, vous devriez voir des informations dans la console. L'information la plus importante à l'heure actuelle est:

<code class="language-bash">$ foundation watch</code>

Voici des informations sur le serveur que vous exécutez. Le premier est votre application réelle, et vous avez également un serveur d'interface utilisateur pour les tests Browsersync (nous en discuterons plus tard). Vous pouvez voir que vos fichiers d'application sont fournis à partir du répertoire DIST, vous pouvez accéder à http://localhost:8000 dans votre navigateur et afficher le modèle de lancement de Foundation 6 standard.

Afficher le contenu interne

Je pense que c'est la partie la plus excitante, mais avant d'arriver à ce point, nous devons terminer tout le processus d'installation.

Structure du dossier, gulpfile.js, ressources JavaScript / CSS

Jetons un coup d'œil à la structure du dossier du projet nouvellement créé. Les dossiers les plus importants sont src et dist. Votre travail de développement est principalement effectué dans le dossier src, et tous les fichiers de production seront préparés dans le dossier dist. Le serveur que vous exécutez sert également des fichiers à partir de ce dossier. Cela signifie que vous pouvez préparer l'espace de travail au besoin, mais finalement, le fichier prêt pour la production sera dans le dossier dist, ce que vous souhaitez fournir en tant que produit fini.

Alors, comment est-ce mis en œuvre? Jetons un coup d'œil au document le plus important ici - gulpfile.js. Si vous n'êtes pas familier avec Gulp, vous voudrez peut-être consulter ce tutoriel d'introduction. Gulp n'a pas l'air aussi effrayant qu'au début, mais c'est important parce que c'est là que toute la magie se passe.

Gulp est basé sur de nombreux plugins Gulp qui ajoutent des fonctionnalités supplémentaires via des packages NPM simples. Dans ce nouveau projet de fondation, ils sont définis dans package.json. Ils seront également téléchargés et installés automatiquement lors de l'exécution foundation new (comme mentionné ci-dessus), vous n'avez donc pas à vous en soucier.

Lorsque vous ouvrez un fichier Gulp, vous pouvez voir que chaque tâche (telle que Clean, Copy, Sass et JavaScript) est définie de la même manière en utilisant un plugin Gulp spécial responsable de cette partie de travail spécifique. De plus, comme vous pouvez le voir en bas du fichier, il existe des tâches majeures comme "build" ou "par défaut" qui regroupent d'autres tâches. La baillon de fondation est configurée afin que vous n'ayez essentiellement besoin de faire quoi que ce soit. Bien sûr, vous pouvez vous ajuster au besoin.

Avec cette configuration, vous pouvez écrire SCSS dans le dossier src/assets/scss et les fichiers JavaScript dans le dossier src/assets/js. Vous pouvez également placer l'image dans le dossier src/assets/img. Lorsque vous exécutez foundation watch ou foundation build, tous ces fichiers seront copiés dans le dossier dist. Selon les options, ils peuvent être compressés ou les images peuvent être optimisées. Tout cela est configuré dans gulpfile.js.

La configuration Gulp et ses plugins sont le sujet d'un autre article. Jetons maintenant un œil au fichier .html et utilisons Panini pour créer des mises en page et des relations avancées.

Modèles de panini et de guidon

Panini est un excellent outil simple construit par l'équipe de fondation. Avec Panini, vous pouvez créer des pages avec des dispositions cohérentes et des sections réutilisables.

Dans votre dossier dist, vous avez des fichiers HTML statiques que vous pouvez utiliser immédiatement. Bien sûr, si vous n'avez qu'un seul fichier, tout est simple. Des problèmes peuvent survenir lorsque vous souhaitez créer de nombreux fichiers HTML avec plusieurs pièces identiques. Il peut s'agir d'un pied de page, d'une barre latérale, d'une en-tête ou de nombreux autres éléments appelés "parties".

Sans panini, vous devez copier tout le code en double dans chaque fichier HTML, et si vous devez modifier, vous devez soit apporter des modifications manuellement dans chaque fichier, soit trouver et remplacer dans un éditeur de texte. Avec Panini, vous pouvez faire tout cela en un seul endroit lors de l'édition, et tous les fichiers seront modifiés et copiés dans le dossier dist.

Tout aussi important, Panini est basé sur la bibliothèque du modèle de guidon. Il peut également compiler Markdown dans votre fichier HTML. Pour plus d'informations sur Panini, consultez la documentation de la Fondation.

Jetons un coup d'œil à la structure du dossier du modèle Panini dans le projet. Nous devons ouvrir le dossier src. Ici, nous avons des données, des dispositions, des pages et des partiels. Comme vous pouvez vous y attendre, dans le dossier de mise en page, nous pouvons écrire notre échafaudage de mise en page principal. Ici, nous pouvons définir un en-tête et un pied de page qui seront répétés sur toutes les pages.

Si vous souhaitez utiliser une seule mise en page, nommez simplement le fichier default.html. Vous trouverez un tel fichier de démonstration dans notre projet. Si vous souhaitez utiliser plusieurs dispositions, vous pouvez créer plus de fichiers avec une balise corporelle spéciale {{> body}} (voir default.html Exemple), et vous devez utiliser des balises spéciales dans la page pour indiquer au compilateur quelle disposition de la page doit utiliser. C'est ce qu'on appelle la matière frontale, comme indiqué ci-dessous:

<code class="language-bash">$ npm install --global gulp bower</code>

Ces marques doivent être placées en haut du contenu du fichier de page. Cela ne s'applique qu'aux pages qui utiliseront cette mise en page, et toutes les autres pages utiliseront la disposition par défaut.

Jetons un coup d'œil au dossier Pages. Dans ce dossier, vous trouverez le fichier index.html, qui est une page de démonstration de contenu. Comme vous pouvez le voir, il n'a pas de HTML ou d'étiquettes corporelles. En effet, il sera simplement injecté dans la disposition default.html discutée plus tôt. Bien sûr, vous pouvez ajouter des pages similaires, mais certaines pages peuvent utiliser différentes mises en page.

Si vous voulez de petits éléments HTML réutilisables, vous pouvez les créer dans le dossier partiels. Il n'y a pas de fichiers dans notre projet de démonstration, mais c'est très simple. Créez simplement un fichier avec des extraits HTML et nommez le fichier. Ensuite, dans votre fichier de mise en page ou votre fichier de page, vous pouvez importer cette section en utilisant quelque chose comme {{> my-partial-file}} (notez qu'il n'y a pas d'extension de fichier). C'est ça. Tout le contenu sera connecté, compilé et copié dans le dossier dist.

Il y a aussi un dossier appelé données. Ici, vous pouvez fournir des données au format des fichiers .json ou .yml. Par exemple, supposons que j'ai un fichier myList.json dans le dossier de données, qui a le contenu suivant:

<code class="language-bash">$ gem uninstall foundation
$ npm uninstall --global foundation-cli</code>

Dans une page de mise en page ou une partie d'un fichier html, je peux utiliser quelque chose comme ce qui suit:

<code class="language-bash">$ npm install --global foundation-cli</code>

Cela vous permet d'itérer sur les données JSON et de générer du HTML. Nous devrions obtenir une liste d'éléments avec des noms dans le tableau.

Comme vous pouvez le voir, Panini est un outil très utile lorsque vous souhaitez créer des structures HTML complexes et que vous ne voulez pas vous répéter.

BrowSersync: synchroniser les tests du navigateur et le rechargement en temps réel

La dernière caractéristique préconfigurée de l'outil CLI de fondation dont j'ai discuté est Browsersync. Comme vous le savez, le travail frontal est difficile car vous devez tester votre site Web sur de nombreux appareils et de nombreuses résolutions. Imaginez maintenant que vous avez une grande table où de nombreux appareils différents se connectent à votre site Web. Lorsque vous cliquez sur quelque chose ou faites défiler une page, tous les appareils feront de même. C'est génial car vous pouvez voir en temps réel ce qui doit être corrigé et ce qui ne fonctionne pas bien.

Les projets que nous créons fournissent automatiquement votre adresse IP externe (voir ci-dessus). Vous pouvez l'obtenir et le coller dans des navigateurs sur tous les différents appareils pour vous connecter au même moteur BrowserSync et commencer les tests.

BrowSersync fournit également des modifications en temps réel, donc si vous enregistrez quelque chose, il apparaîtra dans la fenêtre du navigateur sans rafraîchir manuellement la page. Il apparaîtra également sur tous les appareils connectés, et vous pouvez obtenir toutes ces fonctionnalités gratuitement sans aucun travail supplémentaire avec des modèles Foundation-Cli et Zurb. À quel point est-ce génial?

Conclusion

Je pense personnellement que l'équipe de la Fondation Zurb a fait un excellent travail pour fournir aux développeurs des outils puissants et des échafaudages. Ceci est également important. Plus que quelques plugins et styles CSS prêts à utiliser tout de suite. L'utilisation de fondations pour les sites 6 a été une grande expérience. Imaginez combien de travail de programmation backend que vous pouvez accomplir en utilisant l'outil CLI Foundation. Vous pouvez créer des sites Web et des blogs statiques, et ils peuvent également être assez avancés. Sans oublier, dans de nombreux cas, les blogs et sites Web statiques sont encore plus rapides et meilleurs.

Je vous recommande fortement de regarder de plus près Panini. Vous pouvez également trouver une documentation dans le Package NPM Readme. Il peut faire de nombreuses fonctionnalités puissantes que je ne décris pas ici, telles que la compilation Markdown ou l'assistant personnalisé. Vous pouvez également lire sur Gulp et afficher soigneusement toutes les tâches Gulp utilisées dans le modèle / projet de zurb généré par l'outil Foundation-CLI.

Encore une chose - je n'ai pas mentionné les fichiers CSS et JavaScript compressés. Si vous utilisez la commande foundation watch, il y aura des fichiers CSS et JavaScript dans le dossier dist, mais ils ne seront pas compressés. Si vous voulez des fichiers prêts pour la production dans ce dossier, exécutez simplement foundation build. Si vous voulez en savoir plus sur la commande de fondation, exécutez simplement la commande foundation help. Lorsque vous devez mettre à jour les dépendances dans votre projet, vous pouvez exécuter foundation update.

Dans l'ensemble, j'espère que vous avez appris quelque chose ici. Si vous avez des questions, veuillez me le faire savoir dans les commentaires, ou consultez mon profil pour différentes façons de me contacter.

Fondation 6 outils CLI FAQS (FAQ)

Quelles sont les conditions préalables à l'utilisation de l'outil CLI de Foundation 6?

Pour utiliser l'outil CLI de Foundation 6, vous devez installer Node.js (0,12 ou version ultérieure) et Git sur votre système. Node.js est le runtime JavaScript requis pour exécuter l'interface de ligne de commande. Git est un système de contrôle de version qui suit les modifications du code source pendant le développement de logiciels. Si vous ne les avez pas installés, vous pouvez télécharger Node.js sur le site officiel et Git à partir de son site officiel. Une fois l'installation terminée, vous pouvez commencer à utiliser les outils CLI de Foundation 6.

Comment installer l'outil CLI de Foundation 6?

L'installation de l'outil CLI pour la fondation 6 est simple. Ouvrez votre terminal ou votre invite de commande et tapez la commande suivante: npm install foundation-cli --global. Cette commande indique à NPM (Node Package Manager) de télécharger et d'installer la Foundation CLI globalement afin qu'elle puisse être utilisée dans n'importe quel répertoire de votre ordinateur. Une fois l'installation terminée, vous pouvez la vérifier en tapant foundation -v dans le terminal. Cela devrait montrer la version de Foundation CLI installée sur le système.

Comment créer un nouveau projet en utilisant l'outil CLI de Foundation 6?

Pour créer un nouveau projet à l'aide de l'outil CLI de la Fondation 6, ouvrez un terminal et accédez au répertoire où vous souhaitez créer le projet. Ensuite, tapez la commande suivante: foundation new. Cela vous invitera à sélectionner un modèle pour votre projet. Vous pouvez choisir parmi les modèles de base, les modèles avancés ou les modèles personnalisés. Après avoir sélectionné le modèle, la CLI utilisera le texte du projet

Créez un nouveau répertoire et installez toutes les dépendances nécessaires.

Quelles sont les différentes commandes disponibles dans l'outil CLI pour Foundation 6?

L'outil CLI pour la fondation 6 fournit certaines commandes pour vous aider à gérer vos projets. Certaines des commandes les plus couramment utilisées incluent: foundation new (créer un nouveau projet), foundation watch (démarrez les modifications du fichier du serveur et du moniteur), foundation build (compilez le fichier dans un projet qui peut être utilisé pour la production), et foundation update (remplacer le projet met à jour les dépendances à la dernière version).

Comment mettre à jour l'outil CLI de Foundation 6?

Pour mettre à jour l'outil CLI de Foundation 6, vous pouvez utiliser la commande npm update. Ouvrez votre terminal et saisissez la commande suivante: npm update -g foundation-cli. Cette commande indique à NPM de vérifier les mises à jour des packages globaux de fondation-CLI et de les installer lorsqu'il est disponible.

Comment désinstaller l'outil CLI de Foundation 6?

Si vous avez besoin de désinstaller l'outil CLI de Foundation 6, vous pouvez utiliser la commande npm uninstall. Ouvrez votre terminal et saisissez la commande suivante: npm uninstall -g foundation-cli. Cette commande indique à NPM de supprimer le package global de fondation-CLI du système.

Puis-je utiliser l'outil CLI de Foundation 6 sur plusieurs projets?

Oui, vous pouvez utiliser les outils CLI de Foundation 6 sur plusieurs projets. La CLI est installée globalement sur le système, ce qui signifie que vous pouvez l'utiliser dans n'importe quel répertoire. Pour créer un nouveau projet, accédez simplement au répertoire souhaité et utilisez la commande foundation new.

Quelle est la différence entre les modèles de base et les modèles avancés dans l'outil CLI de la fondation 6?

Les modèles de base de l'outil CLI de la fondation 6 fournissent un point de départ simple pour le projet, ne nécessitant que des paramètres minimaux. Les modèles avancés, en revanche, contiennent des outils et des configurations supplémentaires pour des projets plus complexes. Il s'agit notamment du compilateur SASS, du préfixateur automatique, du connecteur JavaScript et du générateur de carte source.

Comment compiler mon projet de production en utilisant l'outil CLI de Foundation 6?

Pour compiler un projet de production, utilisez la commande foundation build. Cette commande compile vos fichiers SASS et JavaScript, compresse votre CSS et JavaScript, compresse vos images et copie vos fichiers HTML dans le dossier DIST. Ce dossier contient tous les fichiers disponibles pour la production pour le projet.

Comment résoudre les problèmes avec l'outil CLI dans la fondation 6?

Si vous rencontrez des problèmes en utilisant l'outil CLI de Foundation 6, vous pouvez prendre certaines étapes pour dépanner. Tout d'abord, assurez-vous que les dernières versions de Node.js et Git sont installées sur votre système. Si le problème persiste, essayez de mettre à jour la CLI avec la commande npm update. Si vous rencontrez toujours des problèmes, vous pouvez demander l'aide de la communauté de la Fondation sur leur forum officiel ou sur la page GitHub.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!