Share
Dans la dernière leçon, vous avez appris à compiler ou à construire votre projet entier à l’aide de commandes courtes telles que grognement, grunt regarder, gorgée et regarder gulp.
Dans cette leçon, vous apprendrez à créer des commandes qui ajouteront une couche supplémentaire d’impressionnante à vos projets, permettant ainsi le rechargement en direct et la synchronisation du navigateur..
Si vous n'avez pas encore terminé les autres didacticiels de cette série, veuillez les compléter avant de commencer ici..
RemarqueRemarque: pour éviter toute confusion, il existe une combinaison d'application de bureau et de plug-in Chrome, nommée LiveReload, qui est souvent utilisée avec de nombreux packages npm pour gérer le rechargement automatique. Cependant, avec la manière dont nous allons configurer, les applications de bureau et le plug-in de navigateur ne seront plus nécessaires..
Afin de permettre le rechargement en direct, il doit exister un hôte local qui peut être actualisé, c’est-à-dire un moyen de visualiser votre site localement en simulant un hôte Web avec un http: // protocole au lieu de fichier://.
Avec votre projet Grunt, nous nous chargeons de permettre à un localhost de servir les fichiers statiques de votre projet et de le recharger en direct en utilisant le plugin grunt-express..
Installez grunt-express dans votre projet avec:
npm installer grunt-express --save-dev
Puis activez le plugin dans votre Gruntfile en l’ajoutant en dessous de votre grunt.loadNpmTasks lignes:
Accentsconagua
grunt.loadNpmTasks ('grunt-express'); Configurez la tâche express en ajoutant ce code:
express: all: options: bases: 'build', foieeload: true, ouvert: 'http: // localhost: 3000',
Vous remarquerez que dans notre Express configuration de la tâche, nous avons la foie option définie sur vrai, donc, après le lancement de notre aperçu local, il sera automatiquement rechargé chaque fois que des changements sont détectés.
Maintenant, nous allons ajouter une nouvelle tâche nommée début. Nous allons utiliser cette tâche pour déclencher à la fois le Express tâche et la regarder tâche à la fois.
Ajoutez ceci en dessous de votre existant grunt.registerTask ligne:
grunt.registerTask ('start', ['express', 'watch']); Maintenant, lancez la commande:
grunt start
… Et vous devriez voir votre navigateur par défaut s'ouvrir avec l'aperçu de votre projet affiché à l'intérieur.
le regarder La tâche est en cours d'exécution et compilera vos modifications Stylus et Jade dans le dossier «build»..
Express surveille à son tour le dossier "build" pour détecter toute modification. Par conséquent, si vos fichiers HTML, CSS ou JS sont recompilés, ils rechargeront automatiquement votre aperçu..
Nous procéderons ensuite au même type d’aperçu localhost dans votre projet Gulp. Cette fois, nous allons utiliser le plugin gulp-connect à la place.
Installez gulp-connect dans votre projet avec cette commande:
npm installer --save-dev gulp-connect
Rendez-le accessible dans votre Gulpfile en ajoutant cette ligne sous les autres lignes où vous avez utilisé le exiger() une fonction:
var connect = require ('gulp-connect'); Configurez une nouvelle tâche nommée relier en ajoutant ce code sous votre autre code de tâche:
gulp.task ('connect', function () connect.server (root: 'build', livereload: true, open: true););Comme nous l'avons fait avec Grunt, nous allons maintenant créer une tâche personnalisée nommée début qui lancera notre aperçu localhost et lancera notre tâche de surveillance.
Ajoutez cette ligne au bas de votre fichier Gulpfile:
gulp.task ('start', ['connect', 'watch']);Pour permettre le rechargement de notre aperçu localhost, nous allons connecter un autre "tuyau" à la fin du css et html les tâches.
Ajoutez ce déclencheur de rechargement à la fin de chacun:
.pipe (connect.reload ())
Faire des tâches devenir:
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (compress: false, chemins: ['source / stylus']))) .pipe (autoprefixer ()) .pipe (minifyCSS ()) .pipe (renommer ('style.css')) .pipe (gulp.dest ('build')) .pipe (connect.reload ()));… et:
gulp.task ('html', function () gulp.src ('source / jade / *. jade') .pipe (jade ()) .pipe (gulp.dest ('build')) .pipe (se connecter. reload ()));Maintenant, lancez la commande:
gulp start
… Puis allez à http: // localhost: 8080 et vous verrez l'aperçu de votre site local.
Enregistrez une modification dans l'un de vos fichiers Jade ou Stylus et regardez la recompilation et le rechargement rapides comme l'éclair.!
Maintenant que votre aperçu de localhost est automatiquement rechargé, vous pouvez le laisser et conserver une configuration de processus de développement de premier ordre pour votre projet. Cependant, quand il s'agit de pouvoir effectuer des tests sur plusieurs navigateurs et sur plusieurs périphériques, il est également important d’avoir BrowserSync dans l’image..
Avec BrowserSync, vous disposez d’une URL de prévisualisation que vous pouvez connecter à n’importe quel navigateur de votre ordinateur, ainsi qu’à tout autre appareil disposant de la même connexion Internet..
Tous les aperçus que vous exécutez seront ensuite rechargés au fur et à mesure que vous apportez des modifications afin que vous puissiez voir les résultats dans tous les domaines, et toutes vos interactions seront reflétées à chaque instance. Si vous faites défiler ou ouvrez un menu sur un navigateur, vous verrez comment tous les autres navigateurs et appareils répondent en même temps..
Pour installer le plug-in grunt-browser-sync dans votre projet Grunt, exécutez la commande suivante:
npm installer grunt-browser-sync --save-dev
Mettez en commentaire ou supprimez la ligne utilisée pour activer grunt-express:
// grunt.loadNpmTasks ('grunt-express');Ajoutez ensuite cette ligne pour activer grunt-browser-sync à la place:
grunt.loadNpmTasks ('grunt-browser-sync');Commenter ou supprimer le Express tâche que vous avez créée précédemment et ajoutez ce code de configuration pour la tâche browserSync au lieu:
browserSync: bsFiles: src: ['build / *. css', 'build / *. html'], options: watchTask: true, serveur: baseDir: "build",
Localisez votre début tâche et le changer de sorte qu'il exécute le browserSync tâche au lieu de la Express tâche, de:
grunt.registerTask ('start', ['express', 'watch']);… à:
grunt.registerTask ('start', ['browserSync', 'watch']);Maintenant, quand vous exécutez la commande:
grunt start
… Vous verrez toujours un aperçu localhost ouvert et il rechargera quand vous enregistrez les modifications, mais la différence est que la synchronisation du navigateur est active, tout comme la possibilité d'afficher votre aperçu sur d'autres appareils..
Après avoir démarré votre serveur BrowserSync, vous verrez ceci dans le terminal:
- Local: http: // localhost: 3000 Externe: http://192.168.1.3:3000 - Interface utilisateur: http: // localhost: 3001 UI Externe: http://192.168.1.3:3001 -
Prenez l'adresse marquée Local, insérez-le dans certains des autres navigateurs de votre ordinateur et entrez l’adresse intitulée Externe dans tout autre appareil partageant la même connexion. Observez ensuite les réponses synchronisées que vous obtenez sur toutes les instances lorsque vous interagissez avec l'une d'entre elles..
Pour plus d'informations sur BrowserSync via Grunt, rendez-vous sur: http://www.browsersync.io/docs/grunt/
Maintenant, nous allons configurer le même processus, cette fois en utilisant le plugin browser-sync pour Gulp.
Installez le plugin dans votre projet Gulp avec:
npm installer navigateur-sync gulp --save-dev
Commentez ou supprimez la cette ligne:
// var connect = require ('gulp-connect');… Et le remplacer par:
var browserSync = require ('browser-sync');Commentez ou supprimez l'existant relier tâche et ajouter dans cette nouvelle synchronisation du navigateur tâche à la place:
gulp.task ('browser-sync', function () browserSync (server: baseDir: "build"););À la fin des tâches css et html, localisez les deux endroits où vous avez ajouté la ligne:
.pipe (connect.reload ())
… Et remplacez chacune de ces deux lignes par:
.pipe (browserSync.reload (stream: true))
Et enfin localiser votre existant début tâche et le modifier pour exécuter le synchronisation du navigateur tâche au lieu de la relier tâche, remplaçant ceci:
gulp.task ('start', ['connect', 'watch']);… avec ça:
gulp.task ('start', ['browser-sync', 'watch']);Maintenant, quand vous exécutez la commande:
gulp start
… Une fenêtre de navigateur s'ouvrira avec votre aperçu. Tout comme lorsque vous utilisiez BrowserSync via Grunt, les URL de l'aperçu sont désormais synchronisées sur tous les navigateurs et sur tous les appareils fonctionnant hors connexion Internet..
Pour plus d'informations sur BrowserSync via Gulp, visitez: http://www.browsersync.io/docs/gulp/
Vous avez maintenant défini tous les éléments essentiels de la configuration de vos propres projets pour tirer parti de la ligne de commande au cours du développement. Mais qu'en est-il lorsque vous ne voulez pas recommencer à zéro? Qu'en est-il du moment où vous souhaitez utiliser des infrastructures tierces existantes ou que vous souhaitez simplement prendre une longueur d'avance??
Dans le prochain didacticiel, vous apprendrez à utiliser la ligne de commande pour créer de nouveaux projets en quelques instants, avec tout le code tiers dont ils ont besoin, ainsi que la gestion des tâches Grunt ou Gulp, tous configurés et prêts à fonctionner..
Je te vois dans le prochain tutoriel!
