Share
Jusqu'à présent, vous avez appris à utiliser la ligne de commande pour la gestion de packages tiers, la mise sous tension du code frontal, l'automatisation avec les coureurs, le rechargement en direct et la synchronisation du navigateur..
Dans ce dernier tutoriel de la série, vous apprendrez à utiliser la ligne de commande pour bien démarrer vos projets en configurant de nouveaux projets contenant le code tiers requis, ainsi que la gestion des tâches Grunt ou Gulp déjà configurée. , en quelques instants.
Il existe actuellement plus de mille types de projets que vous pouvez convertir en ligne de commande, mais dans ce didacticiel, nous en passerons en revue quatre pour des projets basés sur:
Foundation dispose de sa propre CLI (interface de ligne de commande), idéale pour l’échafaudage de projets-cadres Foundation. Voyons comment utiliser le CLI de la fondation pour créer un projet utilisant Compass..
La première partie de l’échafaudage d’un nouveau projet de fondation consiste à installer la CLI requise. Avant de commencer, vous devez vous assurer que cinq conditions préalables sont installées sur votre système:
Nous avons couvert l’installation de NodeJS, Git et Bower dans des packages tiers maîtrisés, l’installation de Ruby était décrite dans le code frontal d’allumage, et l’installation de grunt-cli dans l’automatisation avec les gestionnaires de tâches..
Après vous être assuré que Ruby est installé, vous devez installer les gemmes Compass et Bundler avec les commandes suivantes:
bijou installer une boussole
bijou d'installation bundle
Vous pouvez maintenant installer la CLI de la Fondation avec cette commande:
gem installer fondation
Maintenant, chaque fois que vous souhaitez démarrer un nouveau projet Foundation, ouvrez un terminal sur lequel vous souhaitez le créer et exécutez la commande.
fondation nouveau nom_projet
Vous verrez alors votre nouvelle structure de dossiers de projets générée générée, comme suit:
À partir de là, vous aurez besoin d’un terminal pointé dans votre dossier de projet, par exemple. dans “nom_projet”.
La gem «bundler» que vous avez installée précédemment sera utilisée ici pour vérifier que toutes les bibliothèques requises ont été installées. Obtenez tout ce qu'il faut en exécutant la commande:
paquet
Vous ne devez le faire qu’une fois lorsque vous créez vos projets Foundation Compass..
Dans le navigateur, votre nouveau projet ressemblera à ceci:
Vous êtes maintenant prêt à commencer le développement de votre projet. Un compilateur Sass intégré surveille les modifications apportées aux fichiers «.scss» de la bibliothèque, puis les recompile en CSS pour vous. Activez-le avec la commande:
bundle exec compas regarder
Yeoman est un outil spécialement conçu pour l'échafaudage de nouveaux projets. Il fonctionne sur NodeJS, intègre Bower pour la gestion des paquets et utilise Grunt ou Gulp pour l'exécution de tâches..
Après l’installation de Yeoman, le processus de base pour l’échafaudage de tout nouveau projet devient:
Accentsconagua
yo générer un nouveau projet, par exemple. yo h5bp En savoir plus sur Yeoman à: http://yeoman.io/
Pour utiliser Yeoman, vous devez avoir installé bower, grunt-cli et gulp dans le monde entier, ce que vous devriez avoir maintenant, à condition que vous ayez suivi tous les tutoriels de la série jusqu'à présent..
Installez Yeoman globalement avec la commande:
npm install -g yo
Maintenant vous êtes prêt à partir à la recherche de générateurs et d'échafauder de nouveaux projets.
Pour échafauder un projet Bootstrap, nous allons utiliser le générateur-gulp-bootstrap. Entre autres choses, ce générateur vous configure avec le framework Bootstrap, jQuery & Modernizr, BrowserSync, la compilation Sass automatique via LibSass, le linting JS automatique et l’optimisation des images..
Installez le générateur globalement avec:
[sudo] npm installer -g générateur-gulp-bootstrap
Pointez votre terminal où vous souhaitez échafauder votre nouveau projet et lancez:
y gulp-bootstrap
Vous obtiendrez un petit affichage comme celui-ci sur votre terminal et pourrez vérifier que vous souhaitez utiliser Bootstrap et Modernizr:
Une fois que le générateur aura fini de fonctionner, vous aurez une structure de dossier comme celle-ci:
Pour construire votre projet, utilisez la commande:
gorgée
Pour créer un aperçu local avec compilation automatique et rechargement, exécutez:
regarder gulp
Dans un navigateur, votre nouveau projet Bootstrap ressemblera à ceci:
Pour échafauder un nouveau projet HTML5 Boilerplate, nous allons utiliser le générateur-h5bp..
Installez le générateur globalement avec:
[sudo] npm installer generator-h5bp -g
Échafaudez votre nouveau projet avec cette commande:
yo h5bp
Vous aurez la possibilité de choisir si vous souhaitez ou non inclure des documents dans votre projet. Le générateur s'exécutera ensuite..
Vous aurez ensuite un nouveau projet HTML5 Boilerplate structuré comme suit:
Dans un navigateur, tout ce que vous voyez est un simple message «Hello world!», Mais si vous affichez le code, vous verrez que vous avez tout ce dont vous avez besoin pour mettre votre site HTML5 en route:
Web Starter Kit est un projet de Google, conçu comme «un standard complet pour le développement de plusieurs périphériques». Vous pouvez en savoir plus sur ses fonctionnalités à l'adresse: https://developers.google.com/web/starter-kit/.
Pour l'échafauder, nous allons utiliser le générateur-mobile.
Installez le générateur globalement avec:
[sudo] npm installer yeoman / generator-mobile -g
Échafaudez votre projet GWSK avec la commande:
yo mobile
Dans votre terminal, vous répondez à une série de questions en fonction desquelles votre projet sera généré:
Lorsque le générateur aura fini d’exécuter votre nouveau projet, vous disposerez de la structure suivante:
Pour ouvrir un aperçu de l'hôte local alimenté par BrowserSync, exécutez cette commande:
avaler servir
L'aperçu de votre site ressemblera à ceci:
Remarque: Après avoir exécuté la commande gulp serve, un message d'erreur indiquant que la synchronisation du navigateur n'a pas pu être trouvé peut s'afficher. Si c'est le cas, installez-le manuellement dans votre dossier avec cette commande:
[sudo] npm installer la synchronisation du navigateur
Pour construire l'ensemble du projet, exécutez cette commande:
gorgée
Pour obtenir des informations sur la vitesse d'exécution de votre projet:
gulp vitesse de la page
Cette commande vous donnera une lecture des données de «vitesse de rotation» dans votre terminal, comme ceci:
Et si vous avez choisi l'une des options d'hébergement lors de l'échafaudage de votre projet, publiez votre site avec:
gulp deploy
C’est à peu près tout pour ce didacticiel: vous avez maintenant un certain nombre d’outils à portée de main pour vous familiariser avec quelques infrastructures frontales communes, tout en bénéficiant de la puissance de la ligne de commande.!
