Il est temps de commencer à grogner.
Dans cet exercice et le prochain, nous allons répéter
le même type de configuration que nous l'avons fait avec les scripts NPM.
Dans la première partie, nous allons configurer la conversion de SCSS en CSS.
Ensuite, nous allons configurer une tâche de surveillance et également servir le code en utilisant la synchronisation du navigateur.
Dans la deuxième partie de l'exercice,
nous utiliserons Usman et les différentes tâches pour préparer le pli de distribution.
Ces exercices ne sont en aucun cas le seul moyen d'
implémenter des configurations Grunt ou des fichiers d'appel.
Ce n'est qu'une illustration de la façon dont nous pouvons utiliser ces outils.
Vous pouvez trouver votre propre façon de configurer
votre fichier Grunt et votre dossier d'appel pour vos projets.
Notre première étape dans l'utilisation de Grunt est de mettre en place la CLI Grunt en tant que module NPM global.
Pour ce faire, ajoutez le type d'invite : NPM -g install Grunt CLI.
Il s'agit de l'interface de ligne de commande pour Grunt.
Une fois cela mis en place,
nous allons mettre en place un module NPM Grunt local pour une utilisation dans le cadre de nos projets.
La CLI Grunt nous permet d'utiliser Grunt.
Nous avons mis en place l'interface de ligne de commande Grunt.
Ensuite, l'étape suivante consiste à mettre en place - Grunt localement,
donc ; NPM installer Grunt moins enregistrer dev.
Ensuite, installez le Grunt localement.
Une fois que vous avez terminé ces deux étapes,
l'étape suivante consiste à aller à notre projet, puis à créer un nouveau fichier,
et nous le nommerons comme Gruntfile.js.
Dans ce Gruntfile.js, nous allons configurer le code pour configurer nos tâches Grunt.
Dans ce fichier, la première étape consiste à ajouter le
code JavaScript 'use strict' signifiant 'use strict'.
Ensuite, vous dites module.exports
= fonction (grognement).
Ensuite, à l'intérieur, nous allons configurer la configuration Grunt pour toutes les tâches.
Comme je l'ai mentionné précédemment, Grunt est un coureur de tâches basé sur la configuration.
Donc, nous allons installer les différents plug-ins Grunt pour
les différentes tâches, puis les configurer dans notre fichier Grunt.
Pour faire la configuration,
nous allons ajouter le code ici, en
disant : Grunt.initConfig
et
dans ce InitConfig, nous allons ajouter la configuration pour les tâches Grunt de la roue.
Une fois cette opération terminée,
sauvegardons les modifications.
Dans notre prochaine étape,
nous allons mettre en place quelques plug-ins Grunt pour nous permettre de convertir le code SCSS en code CSS.
Pour ce faire, je vais installer un module NPM appelé
Grunt SASS — Grunt SASS, save def.
En plus de cela,
je vais mettre en place deux autres modules Grunt appelés,
NPM Install Time Grunt, et Jit Grunt.
Ces deux modules — Time Grunt et Jit grognement.
Le module Time Grunt affiche les statistiques de temps pour exécuter les différentes tâches Grunt.
Le module Jit Grunt est utilisé pour le chargement dans
ces plug-ins Grunt chaque fois qu'ils sont nécessaires dans n'importe quelle application.
L' autre alternative est de charger
explicitement dans les différents modules Grunt dans votre fichier de configuration Grunt.
Je préfère utiliser le Jit Grunt pour qu'il prenne soin de charger
dans tous les plug-ins Grunt dont j'ai besoin,
comme lorsque je les utilise dans le code.
Installez ces deux Time Grunt et Jit Grunt et une fois qu'ils sont installés,
il est temps de configurer notre tâche de conversion SASS.
Maintenant, vous devez évidemment vous demander pourquoi tapons-nous ce
module.exports, puis fonctionnons et ainsi de suite.
C' est ainsi que nous définissons les modules de noeud.
Nous allons traiter de la structure des modules de noeud et pourquoi nous utilisons cette approche
dans le cours de modules de noeud côté serveur plus tard dans la spécialisation.
Pour le moment, acceptez simplement que c'est ainsi que le code est écrit pour Grunt,
car le fichier Grunt est lui-même
un module de nœud qui va se charger dans divers plug-ins Grunt.
Après cela, nous allons exiger quelques plugins Grunt ici.
Pour ce faire, nous dirons require ('time- grognon'),
et nous dirons grognement par rapport à la configuration que nous utilisons pour le chargement dans Time Grunt.
Exiger, comme vous l'apprendrez plus tard lorsque vous en apprendrez plus sur les modules de noeud,
est une façon de dire que la charge dans le module de noeud Time Grunt
à utiliser dans ce module de noeud particulier.
De même, j'aurai besoin du module de nœud Jit Grunt.
Ce module de noeud Jit Grunt s'assure qu'il va charger dans
n'importe quel autre module de noeud ou tout autre plug-in Grunt- qui sont des modules de noeud
, fondamentalement, comme dans quand ils sont réellement implicites dans mon Grunt pour faire diverses tâches.
L' alternative serait de charger manuellement dans chacun de
ces plug-ins Grunt explicitement en utilisant l'instruction requise.
Je me sauve un peu d'ennuis en utilisant simplement Jit Grunt,
qui prend soin de charger ces modules de noeud si nécessaire.
Maintenant, en passant dans la configuration,
comme nous l'avons compris, Grunt travaille sur la configuration,
donc chaque plug-in Grunt que nous voulons utiliser pour effectuer une tâche,
il doit être configuré dans ce fichier Grunt InitConfig.
Cette configuration est essentiellement un objet JavaScript.
Si vous êtes familier avec les objets JavaScript,
vous commencez à comprendre la syntaxe très, très rapidement.
La première tâche que je vais configurer est SASS.
Donc, je tape SASS ici,
puis à l'intérieur de SASS, je dis dist.
Maintenant, vous devez croire que c'est ainsi que la configuration est faite.
Donc, je dis dist,
puis à l'intérieur,
je dis des fichiers, et puis là,
je spécifie les fichiers qui doivent être convertis.
Je dis, CSS/styles.CSS,
qui dépend de CSS/styles.scss.
Avec cela, nous complétons la configuration de la tâche SASS ici.
Une fois que nous avons terminé la configuration de la tâche SASS,
si vous voulez vraiment exécuter la tâche SASS,
puis en bas vous configurez la tâche SASS en disant « Grunt.registerTask »,
puis j'appellerai cette tâche CSS
, et puis je vais,
entre crochets, dire « SASS ».
Maintenant, pour comprendre la syntaxe ici,
ceci comme vous pouvez le voir dit « grunt.registerTask » et le nom de cette tâche est CSS.
Et qu'implique cette tâche ?
Cette tâche implique l'exécution de la tâche SASS qui a déjà été configurée ici.
C' est ainsi que nous lisons cette syntaxe ici.
Si vous ne le souhaitez pas, vous n'avez pas besoin de le configurer,
car nous utiliserons SASS avec la tâche de surveillance pour
exécuter automatiquement le SASS lorsque notre fichier SCSS sera modifié.
Avec cela, sauvegardons les modifications.
Permettez-moi de vous montrer cette tâche particulière en action.
Si vous configurez la tâche avec le nom CSS là,
puis ajoutez l'invite,
vous pouvez taper « grunt.CSS », puis il exécutera
la tâche de convertir le code sass en code CSS.
Aller à votre invite de commande, à l'invite,
tapez « grunt.CSS » et vous verrez
la tâche SASS s'exécutant puis convertissant le fichier styles.sess en fichier styles.CSS.
En outre, comme vous pouvez le voir,
le Time Grunt imprimera des statistiques comme celle-ci
pour indiquer combien de temps chacune de ces tâches a pris.
Si cela vous intéresse,
alors vous pouvez regarder ces détails ici.
Dans notre prochaine étape, nous allons configurer la montre et le serveur,
afin de garder une surveillance sur
les fichiers SASS et de les convertir automatiquement lorsqu'ils sont modifiés,
puis nous allons configurer le serveur,
en utilisant BrowserSync pour servir notre site Web.
Pour configurer les tâches Watch and Serve,
je vais installer quelques plug-ins plus grossiers,
donc je dirai npm install,
grunt-contrib-watch moins save-dev.
Donc c'est la montre Grunt-Contrib-Watch.
Grunt plug-in qui est un module de nœud, alors installez cela.
Ainsi, le plugin-in Watch vous permet de garder une montre sur vos différents fichiers.
Le prochain plug-in que je vais
installer est grunt-browser-sync.
Le module BrowserSync est celui que je vais utiliser,
pour enregistrer les fichiers de mon dossier de projet,
afin que je puisse voir le site Web dans un navigateur.
Une fois que j'ai installé ces deux modules,
il est temps d'aller dans mon grunt.initconfig,
puis de configurer les deux tâches.
Un pour garder une montre,
le second pour servir les fichiers à l'aide de BrowserSync.
Donc, revenant à mon initconfig,
mettez une virgule là après le SASS,
puis passez à la ligne suivante.
N' oubliez pas de mettre cette virgule là.
Une virgule manquante provoque beaucoup de maux de tête lorsque vous essayez d'exécuter vos tâches grognement.
Il est très difficile d'identifier que vous avez manqué une virgule.
Il est donc important de faire attention à
la syntaxe et de s'assurer que vous ne manquez aucune de ces virgules.
Ça reviendra te mordre au mauvais moment.
Donc, la tâche suivante,
que je vais configurer est WatchTask.
Alors je dis « Watch » et qu'est-ce que je veux regarder ?
Je veux regarder ces fichiers, qui est CSS/*.SCSS.
Donc c'est le fichier SCSS que je veux regarder.
Tous les fichiers SCSS dans mon dossier CSS.
Si l'un d'entre eux est modifié,
alors la tâche correspondante que je vais exécuter est, SASS.
La tâche SASS que j'ai déjà configurée plus tôt.
Donc, avec cela, j'ai configuré mon WatchTask,
pour garder une surveillance sur les fichiers SCSS, puis
les convertir automatiquement en invoquant le SASS.
Maintenant, avec WatchTask, je peux réellement garder une montre sur plusieurs fichiers,
puis appeler automatiquement les tâches correspondantes pour ces fichiers.
Donc, par exemple, je peux garder une montre sur
mes fichiers JavaScript, puis faire automatiquement des indications JS,
lorsque mes fichiers changent.
Ou pour faire l'identification et ainsi de suite.
Maintenant, le suivant que je vais configurer est BrowserSync.
Encore une fois, n'oubliez pas la virgule après WatchTask,
puis tapez BrowserSync.
Je dirais BrowserSync ici et puis pour le BrowserSync,
je dirais configurer une tâche à l'intérieur.
Maintenant, c'est la syntaxe que nous utilisons pour mettre dans
la configuration dans notre fichier grunt.
Donc, il est dit BrowserSync dev.
Maintenant, si vous me demandez pourquoi,
nous avons juste besoin de lire la documentation,
pour chacun de ces plug-ins, puis de comprendre comment configurer ces plug-ins.
Donc, j'ai déjà lu la documentation et j'
ai trouvé une configuration de base pour chacune de ces tâches, c'est pourquoi je les tape simplement.
Évidemment, si
vous voulez plus de flexibilité, vous pouvez lire la documentation correspondante, puis trouver
d'autres façons de configurer ces tâches.
Ma configuration ici n'est qu'une façon d'aborder ou de résoudre les problèmes.
Donc ici, je spécifie les BSFiles,
donc ce fichier spécifie quels fichiers doivent être surveillés
par mon BrowserSync, puis quand l'un de ces fichiers change,
mon BrowserSync provoquera le rechargement du navigateur.
Donc, je vais regarder tous les fichiers dans mon dossier CSS,
les fichiers HTML dans mon dossier de projet,
puis tous mes fichiers JavaScript dans le dossier JS.
Donc, avec cela, j'ai configuré tous les fichiers sur lesquels je vais garder une montre,
puis provoquer automatiquement un rechargement de ma page si nécessaire.
Et puis, la prochaine configuration que je dois
faire est d'autres options, pour mon BrowserSync.
Donc, les options que je vais spécifier est,
WatchTask true, ce qui signifie qu'il y a un WatchTask en cours d'exécution,
et le répertoire de base pour mon serveur.
Donc, je dis baseDIR,
et puis je spécifie, point slash.
Donc, le répertoire courant,
comme mon répertoire de base.
Donc, avec ces changements,
laissez-moi enregistrer les modifications de mon fichier grognement,
puis je vais descendre ci-dessous et puis configurer une autre tâche grognement, ici appelée par défaut.
Donc, je spécifierais la tâche par défaut.
Pour cette tâche par défaut, que dois-je faire ?
J' ai besoin d'exécuter
BrowserSync et aussi la deuxième tâche que je vais faire est de regarder.
Je devrai d'abord faire la tâche BrowserSync, puis la WatchTask plus tard.
Parce que la tâche BrowserSync va commencer à servir mon serveur.
Si je fais d'abord la tâche WatchTask et la tâche BrowserSync plus tard,
la WatchTask
arrêtera tout, puis toutes les tâches restantes derrière qui ne s'exécuteront pas.
Donc, si vous utilisez WatchTask,
faites-le comme un dernier dans la séquence que vous spécifiez entre crochets.
Avec cela, mon projet est maintenant configuré,
à la fois pour surveiller mes fichiers SASS et le servir chaque fois que nécessaire.
Donc, ça complète mon fichier grognement,
revenons à notre terminal.
Pour revenir à mon terminal,
j'ai ouvert un autre onglet, puis dans cet onglet,
je vais exécuter la tâche grossir,
qui gardera également mon BrowserSync en cours d'exécution et servira des
fichiers et rechargera automatiquement la page Web,
si l'un de ces fichiers change.
Donc, si vous configurez une tâche comme une tâche par défaut comme nous l'avons fait dans l'exercice,
alors à l'invite,
j'ai juste besoin de taper grognement, puis il exécutera automatiquement la tâche par défaut.
Une fois que mes tâches grognement commencent à s'exécuter,
vous pouvez voir qu'il a démarré BrowserSync et qu'il sert
les fichiers et qu'il exécute également WatchTask,
qui attend que toutes les modifications exécutent automatiquement la tâche SCSS.
Pour vous montrer comment la tâche SCSS sera déclenchée,
chaque fois que j'apporte des modifications à mon fichier .scss styles.scss,
j'ai donc mis en place le fichier Styles.scss,
et je vais simplement enregistrer ce fichier.
Et puis vous remarquerez que immédiatement,
sur le côté gauche, la tâche SASS est appelée et s'exécute, puis re-compile et cela
provoquera également le changement du fichier Styles.scss, après avoir été recompilé.
Ensuite, cela déclenchera BrowserSync pour recharger automatiquement ma page Web.
Avec cela, nous terminons notre exercice de grognement première partie.
C' est le bon moment pour enregistrer vos fichiers,
dans le référentiel Git avec le message Grunt première partie.