Maintenant que nous avons une compréhension des
différentes étapes impliquées dans la construction et le déploiement de notre site Web,
ainsi qu'une brève introduction aux scripts NPM lors de la conférence précédente, nous
allons plonger en profondeur dans le développement de
scripts NPM pour automatiser de nombreuses tâches dont nous avions parlé plus tôt.
Comme vous l'avez vu dans la conférence précédente,
nous avons déjà quelques scripts NPM que nous avions inclus dans notre fichier package.json,
un pour démarrer le serveur lite et le second
pour convertir le code SCSS en CSS.
Dans cet exercice et le suivant,
nous allons explorer les scripts NPM un peu plus en détail.
Pour commencer, faisons d'abord un peu de ménage sur le fichier index.html.
En allant au fichier index.html,
nous voyons que nous avons ce code JavaScript au bas de ce fichier index.html.
Je préférerais garder ce code JavaScript dans
un fichier séparé qui contient tous nos scripts,
puis inclure ce fichier dans mon index.html.
Pour ce faire, créons un autre dossier ici avec le nom js.
Et dans ce dossier js,
je vais créer un nouveau fichier avec le nom scripts.js.
Et aller à index.html,
je vais simplement couper ce code JavaScript d'ici,
puis coller cela dans le fichier scripts.js,
puis enregistrer les modifications dans le fichier scripts.js.
Maintenant que nous avons déplacé tout notre code JavaScript dans son propre fichier,
je vais maintenant inclure ce fichier JavaScript dans mon index.html juste là.
Je dirais <script src =
« js/scripts.js » Donc de cette façon,
tout mon code JavaScript est maintenant inclus dans mon fichier index.html.
De cette façon, mon fichier index.html contient tout le code html,
et tout mon code CSS et JavaScript sont désactivés dans leurs propres fichiers séparés.
Laissez-moi copier cette ligne de scripts à partir de la page index.html,
puis aller à la page aboutus.html,
faites défiler jusqu'au bas où j'ai inclus
d'autres scripts, puis collez ceci.
De même, laissez-moi passer à la page contactus.html,
et à nouveau faites défiler vers le bas du fichier là.
Laisse-moi coller cette ligne.
Sauvegardons les modifications, puis passons à l'étape suivante.
L' étape suivante que je voudrais faire est d'installer quelques
modules NPM que je vais utiliser pour automatiser certaines tâches.
Le premier module NMP que je vais installer s'appelle onchange.
Ce module onchange va regarder les fichiers dans mon dossier de projet,
puis chaque fois que ces fichiers changent,
il déclenche automatiquement une tâche à exécuter.
De cette façon, par exemple,
si je mets en place une montre sans citation sur certains fichiers,
disons par exemple mon fichier SCSS,
alors chaque fois que j'apporte des modifications à mon fichier SCSS,
il sera automatiquement recompilé dans le fichier CSS correspondant.
Nous avons déjà le script qui fait la recompilation.
Donc tout ce que j'ai à faire est de mettre en place une montre sur ce dossier particulier.
Maintenant, c'est là que je vais utiliser le module NPM appelé Onchange.
Il existe un autre modèle NPM appelé Watch,
que vous pouvez également utiliser dans le même but.
Dans cet exercice, je vais utiliser le module Onchange,
puis nous traitons de grant and gulp dans les leçons ultérieures,
nous allons utiliser le module Watch dans le même but.
En outre, je vais également installer un autre module NPM appelé shell parallèle.
Ce module Parallelshell me permet d'exécuter
plusieurs scripts NPM dans Parallelshells comme son nom l'indique.
Ainsi, plusieurs scripts NPM peuvent être
exécutés simultanément et me permettent de surveiller divers fichiers,
et d'effectuer d'autres tâches.
Donc, permet d'installer ces deux modules NPM.
Nous allons les installer localement dans ce projet particulier.
Donc, pour ce faire, je vais taper npm install.
Je dois —save-dev, puis je dirais onchange
et parallelshell et ensuite attendre que ces deux modules NPM soient installés.
Une fois les deux modules installés,
je vais inclure quelques scripts NPM dans mon fichier package.json.
Et je vais vous expliquer la raison car nous y incluons ces scripts.
Pour revenir à mon fichier package.json,
juste après ce SCSS,
je vais inclure un autre script appelé « watch:scss ».
Et comme son nom l'indique,
cela va garder une surveillance sur les fichiers SCSS.
Donc, c'est là que j'invoquerai le module NPM onchange que je viens d'installer,
puis je dirais un code unique 'css/*.scss ».
Donc, ce qui signifie que garder la surveillance sur tous les fichiers SCSS qui sont là dans le dossier CSS.
Si l'un d'eux change,
alors vous allez déclencher ce script particulier et le script est « —npm
run scss » parce que c'
est le script qui va faire la recompilation de mon code SCSS dans le code CSS correspondant.
Donc avec ça, j'ai mis en place une montre pour mon SCSS.
Évidemment, je peux taper « nmp watch : scss ».
Et puis il déclenchera le script là-bas avec le module onchange,
donc il gardera une surveillance sur cela.
Si vous faites cet exercice sur une machine Windows,
au lieu de la citation simple dans le script,
vous devriez remplacer cela par la barre oblique inverse et le guillemet double.
De même, l'autre guillemet simple
remplace également celui par la barre oblique inverse et le guillemet double.
Donc, voici comment le script va ressembler sur une machine Windows.
Maintenant, je vais utiliser Parallelshell
pour déclencher plusieurs de ces scripts pour être simultanément actifs.
Donc, je dirais « parallelshell »,
puis entre guillemets,
je dirais 'npm run watch : scss'.
Ainsi, le Parallelshell prend plusieurs de ces paramètres en tant que paramètres,
chacun entre guillemets simples.
Et le second est 'npm run lite'.
Vous pouvez donc voir que ce Parallelshell me permet d'exécuter deux scripts simultanément, l'
un pour surveiller mon fichier SCSS,
l'autre pour exécuter le shell lite.
Si vous faites cet exercice sur une machine Windows,
au lieu du code unique dans le script,
vous devriez remplacer celui-ci par la barre oblique inverse et le guillemet double.
De même, l'autre guillemet simple
remplace également celui par la barre oblique inverse et le guillemet double.
C' est ainsi que le script va ressembler sur une machine Windows.
Maintenant, après avoir fait ces changements,
laissez-moi enregistrer les changements et puis je vais monter
ici et puis commencer un script que j'ai ici.
Je vais changer cela de « npm run lite » à « npm run watch : all ».
Et enregistrez les modifications ici.
Donc, avec cela, les scripts dont j'ai besoin sont maintenant configurés.
Donc maintenant, je peux aller de l'avant et faire
« npm start » et qui va essentiellement démarrer ces deux scripts simultanément, l'
un en gardant une surveillance sur mes fichiers SCSS qui
à son tour déclenchera la compilation du SCSS en CSS,
l'autre qui démarre mon serveur lite.
Maintenant, j'ai commencé sous l'onglet de la table, puis je suis passé dans le dossier du projet,
puis j'ajoute l'invite.
Je vais taper « npm start ».
Et cela devrait déclencher à la
fois mon serveur lite qui va enregistrer les fichiers de mon dossier de confusion,
et aussi déclencher le module Onchange pour garder une surveillance sur les fichiers SCSS.
Pour vous aider à illustrer comment cette Onchange garde une surveillance sur mes fichiers SCSS,
ce que je vais faire est d'aller dans mon fichier .scss stylesici,
puis je vais simplement enregistrer le fichier à nouveau.
Maintenant, chaque fois que ce fichier est enregistré,
je ne vais pas y apporter de modifications.
Je vais juste frapper la sauvegarde sur le fichier.
Donc, à chaque fois que ce fichier est modifié,
vous verrez que immédiatement
Onchange déclenchera le script SAS du nœud à exécuter,
qui compilera le fichier de SCSS en CSS et crée le fichier CSS ici,
puis enregistre le fichier qui déclenchera également
ma page Web pour le recharger dans le navigateur.
Donc, c'est essentiellement ce que nous avons réalisé en utilisant le module Onchange pour
garder une surveillance sur les fichiers qui ont ensuite changé
déclenchera certains des scripts NPM automatiquement.
Maintenant, cela nous libère des préoccupations concernant le déclenchement manuel de ces tâches.
Par exemple, si vous avez un ensemble de tâches que vous souhaitez déclencher automatiquement,
certaines modifications se produisent.
Vous pouvez facilement configurer de telles tâches de surveillance pour garder une surveillance sur ces modifications.
Maintenant, je l'ai illustré avec un seul exemple.
Dans mon exemple ici,
je ne modifie que les fichiers CSS qui doivent être compilés.
Mais plus tard, nous travaillons avec des frameworks JavaScript.
Vous verrez que vous voudrez peut-être déclencher des compilations lorsque divers fichiers ont changé.
Et tout cela peut être facilement géré à l'aide de ces tâches de montre.
Est-ce que cela, nous terminons cet exercice.
Ici, nous avons appris à configurer quelques scripts NPM supplémentaires
et à déclencher automatiquement certains scripts en utilisant le module onchange NPM.
Nous avons également vu l'utilisation du module shell parallèle pour exécuter
plusieurs scripts NPM simultanément dans notre fenêtre de terminal.
C' est un bon point pour vous de faire un commentaire Git avec le message « NPM Scripts Part 1".