Share
Web Starter Kit est une nouvelle initiative de Google. une partie de leur mission consistant à rationaliser le flux de travail du développement Web, tout en préconisant les meilleures pratiques suggérées par Google dans Web Fundamentals.
Au moment de la rédaction de ce document, Web Starter Kit existe depuis quelques jours et a été lancé en tant que référentiel public sur Github. Il a immédiatement gagné du terrain au sein de la communauté du développement Web, atteignant rapidement la première place dans les dépôts de tendances de Github..
Ces jours-ci, il existe de nombreuses bibliothèques et structures, mais Web Starter Kit est plutôt intéressant et mérite d’être exploré. Dans cet article, je vais vous présenter quelques-unes de ses principales caractéristiques et vous montrer comment l'utiliser pour votre prochain nouveau projet. Sans plus tarder, commençons!
Comme son nom l'indique, Web Starter Kit est une boîte à outils de développement conçue comme point de départ pour de nouveaux projets. Google, dans son référentiel Github, le décrit comme suit:
Un point de départ pour le développement Web multi-périphériques
Lors de l'inspection, vous remarquerez peut-être que Web Starter Kit tire son inspiration de ceux de HTML5 Boilerplate et Yeoman (il combine le meilleur de ces deux outils populaires). Le kit de démarrage Web est livré avec des modèles de démarrage optimisés pour la vitesse et les périphériques multiples.
Nous travaillons activement à la fourniture du meilleur score et de la meilleure cadence d'images de PageSpeed Insights..
En plus de cela, il comprend également un certain nombre d'outils facilitant le développement, notamment un outil de test synchronisé, un rechargeur de navigateur dynamique, un linterface JavaScript, un compilateur Sass, un minificateur CSS et un optimiseur d'image. Comme dans Yeoman, ces outils sont préconfigurés, ce qui nous permet de commencer le développement sans perdre de temps en configuration..
Vous pouvez récupérer les fichiers dans le dépôt de Google et les télécharger simplement. Toutefois, pour utiliser pleinement le Kit de démarrage Web pour votre nouveau projet, il est conseillé d'installer les outils suivants sur votre système:
Git: Comme mentionné ci-dessus, le projet Web Starter Kit est hébergé sur Github. Vous trouverez plus maigre de saisir le référentiel à travers le Git Clone commande plutôt que de télécharger le package Zip. Si vous utilisez l'application Github, appuyez sur le bouton Cloner dans le bureau bouton de la page de repo:
Vous ne savez pas de quoi s'agit-il? Découvrez Git for Designers on Tuts + Code.
Node.js: La plupart des outils que vous rencontrerez dans Web Starter Kit, tels que JSLinter, sont basés sur Node.js. Et ils seront installés via Node Package Manager (NPM). Vous pouvez vous référer à Installation de Node and NPM pour obtenir de l'aide..
Rubis et sass: Web Starter Kit utilise gulp-ruby-sass pour compiler Sass en CSS, ce qui nécessite l'utilisation de Ruby et de Sass. Pour les utilisateurs OS X et Linux, vous aurez déjà installé Ruby. Utilisateurs Windows; Utilisez RubyInstaller pour installer Ruby. Une fois Ruby installé, lancez bijou installer sass à partir de l'invite de commande pour installer Sass.
Pour plus d'informations sur l'installation de Ruby et Sass, consultez Mastering Sass: Leçon 1..
Gorgée: utiliser Gulp pour gérer de nombreuses tâches nécessaires au cours du développement aidera vraiment. Avec Node.js déjà sur votre système, installez Gulp avec la commande suivante:
npm install -g gulp
Enfin, assurez-vous que git et npm les commandes sont accessibles. Tapez la commande ci-dessous pour vérifier si git et npm fonctionnent.
git --version && npm -v
Ces commandes doivent répondre avec le git et npm versions, comme suit.
Ok, pour commencer, naviguez dans le répertoire dans lequel vous souhaitez placer votre projet (soit en utilisant les commandes, soit tapez "cd" puis faites glisser le dossier choisi dans la fenêtre du terminal avant d'appuyer sur "entrer"), puis exécutez la commande suivante pour cloner le projet de kit de démarrage Web:
cloner git https://github.com/google/web-starter-kit.git
Ensuite, changez le répertoire en cours dans le dossier "web-starter-kit" où se trouvent les fichiers du Web Starter Kit..
cd web-starter-kit
Dans ce dossier, kit de démarrage web /, tu trouveras:
Accentsconagua
app /; c'est le dossier où réside tout le code source non minié.package.json; enrôler les dépendances.gulpfile.js; contenant la configuration pour exécuter la tâche Gulp.
Comme mentionné précédemment, Web Starter Kit s'appuie sur un certain nombre de packages de nœuds, y compris les plugins Gulp, pour exécuter plusieurs processus de construction. La prochaine étape consiste donc à installer les packages de nœuds spécifiés dans le fichier "package.json". Faites ceci simplement en entrant la commande suivante:
npm installer
Une pile complète de paquets de nœuds sera ensuite installée dans un dossier nommé node_modules.
En résumé, Gulp est similaire à Grunt. Les deux sont des "coureurs de tâches" qui automatisent certaines tâches pendant le développement, dans le but de gérer le travail dur pour vous. Normalement, nous devrions spécifier et configurer des tâches Gulp dans un gulpfile.js, mais depuis que Web Starter Kit a fait ce travail pour nous, nous pouvons immédiatement exécuter les tâches Gulp sans rien toucher.
Au cours de votre processus de développement, tapez cette commande ci-dessous.
avaler servir
Cette commande activera BrowserSync qui a été incorporé et configuré dansgulpfile.js. BrowserSync est un outil pratique qui nous permet de tester le site Web de manière synchrone sur plusieurs navigateurs. Avec BrowserSync, les interactions de l'utilisateur telles que le défilement, les clics et le remplissage des entrées sont reflétées en temps réel sur tous les appareils connectés. Cela nous permet de détecter les anomalies pouvant survenir sur chaque périphérique connecté au cours de l'interaction. BrowseSync est également armé d'un serveur HTTP. En exécutant cette commande, vous recevrez le localhost adresse à laquelle vous pouvez accéder au site.
De plus, BrowserSync surveillera les modifications apportées aux fichiers spécifiés, notamment le code HTML, les feuilles de style et les images. Lorsque nous modifierons ces fichiers, BrowserSync lancera immédiatement la tâche spécifiée dans gulpfile.js
Chaque fois que vous êtes prêt à publier votre site Web, vous pouvez simplement exécuter gorgée. Cette commande exécutera toutes les tâches de Gulp, compilera le projet dans un package distribuable dans un nouveau dossier nommé dist / qui est prêt à être remis à votre client.
Une liste détaillée des tâches Gulp est disponible à la section Résumé des outils du kit de démarrage Web..
Web Starter Kit fournit un guide de style qui lance le style de base des éléments et composants communs, tels que la typographie, les boutons, les liens, la chapelure, les tableaux, les icônes et la grille. En parcourant la source, vous trouverez également les sélecteurs utilisés pour produire les styles..
Le guide de style se trouve dans la application / guide de style son dossier et son interconnexion avec les feuilles de style, nous pouvons donc voir le Guide de styles évoluer pendant la mise à jour de la feuille de style. Brillant!
Style de base des icônes présentées dans le guide de style du kit de démarrage WebRemarque: Assurez-vous de consulter notre série All About Style Guides.
Bien joué! Nous avons téléchargé et configuré le kit de démarrage Web ainsi que ses dépendances. Vous devriez donc pouvoir travailler sur votre projet..
En tout, Kit de démarrage Web est assez solide - même dans sa version bêta actuelle. Le modèle et les outils sont bien configurés. ils travaillent hors de la boîte. Et vu que ce projet est soutenu par Google et que de brillants développeurs le soutiennent, Web Starter Kit pourrait rapidement devenir aussi populaire que Bootstrap ou Foundation. J'ai vraiment hâte de voir comment ce projet évoluera à l'avenir.
