Gulp en tant que serveur Web de développement

Le coureur de tâches Gulp.js devient de plus en plus populaire ces derniers temps. Il peut être utilisé pour de nombreuses tâches, telles que la concaténation de fichiers JavaScript ou la réduction d'images. Si vous êtes nouveau sur Gulp.js, je vous recommande de commencer par gérer vos tâches de construction avec Gulp.js. 

Dans ce didacticiel, vous apprendrez à utiliser Gulp.js afin d’exécuter un serveur Web local avec, foie soutien.

L'ancienne manière

Supposons que nous souhaitons développer une application d'une seule page. Le point d'entrée de cette application est simple index.html fichier. Notre objectif est d’accéder à ce fichier via le navigateur, en allant sur localhost. Dans le passé, peut-être que vous configurer un serveur Apache ou Nginx. Eh bien, ce n'est plus nécessaire.

Une meilleure façon

Aujourd'hui, une implémentation en JavaScript existe pour presque tout, même pour un serveur Web. Le plus populaire s'appelle Connect. Nous allons l'utiliser, en utilisant un plugin Gulp.js appelé gulp-connect. 

Dans les sections suivantes, nous allons configurer un serveur Web local pour une application à une seule page. Par conséquent, je suppose que vous avez déjà configuré les fichiers de base, tels que gulpfile.js fichier.

La configuration initiale

Nous commençons par installer le plugin Connect avec la commande ci-dessous. Tout ce dont nous avons besoin sera installé avec cette commande unique.

npm installer --save-dev gulp-connect

Pointe: npm installer --save-dev peut être abrégé avec npm i -D.

Définissons maintenant une tâche pour le serveur Web. Notre gulpfile.js devrait alors ressembler à ceci:

var gulp = require ('gulp'), connect = require ('gulp-connect'); gulp.task ('serveur Web', function () connect.server ();); gulp.task ('default', ['webserver']);

Nous pouvons maintenant démarrer le serveur Web en exécutant simplement gorgée dans le terminal. Nous pouvons ouvrir localhost: 8080 dans notre navigateur, où nous devrions voir index.html. Le serveur Web monte la structure de fichier du dossier, où le gulpfile.js vit dans, à la racine de localhost: 8080. Le serveur s'exécutera jusqu'à ce que vous arrêtiez la tâche en appuyant sur Ctrl + c sur votre clavier. Génial!

Vous pouvez trouver le code source pour cela et tous les exemples suivants sur Github. Chaque exemple contient tous les fichiers nécessaires pour reproduire une configuration opérationnelle. Tu as juste besoin de courir npm installer dans le répertoire respectif.

Ajouter foie Soutien

La configuration du serveur Web de base était facile, non? Alors continuons à obtenir foie fonctionnement. Nous devons faire deux choses: tout d’abord, indiquez au serveur Web de commencer foie soutien et deuxièmement, nous disons foie quand actualiser la page avec un nouveau contenu.

La première étape est simple. Il suffit de définir le foie propriété à vrai. le serveur Web La tâche ressemble alors à ceci:

gulp.task ('serveur Web', function () connect.server (livereload: true););

La deuxième étape dépend de votre cas d'utilisation. Dans cet exemple, nous allons configurer la compilation automatique des fichiers LESS dans une feuille de style CSS et l'injecter dans le navigateur. Décomposons cet exemple en ses parties. Nous avons besoin d'un "observateur" qui vérifie si certains fichiers LESS ont été modifiés. Cet observateur devrait ensuite déclencher le compilateur LESS, qui génère un fichier CSS. Ce fichier CSS doit ensuite être injecté via foie.

Pour cet exemple, nous allons utiliser le plugin gulp-less. Vous pouvez l'installer en lançant npm installer --save-dev gulp-less. L'observateur est déjà livré avec Gulp.js. Notre structure de fichier d'application devrait ressembler à ceci:

. ├── node_modules │… styles main.less gulpfile.js index.html package.json

dans le regarder tâche, Gulp.js écoute les modifications dans tous *.Moins fichiers dans le modes dossier et déclenche la Moins tâche. Ici le main.less fichier est le point d’entrée pour LESS. Après chaque étape de compilation, le résultat sera automatiquement injecté dans le navigateur. Le code pour le gulpfile.js ressemble à ce qui suit, n'hésitez pas à copier et coller ça, à ton projet.

var gulp = require ('gulp'), connect = require ('gulp-connect'), less = require ('gulp-less'); gulp.task ('serveur Web', function () connect.server (livereload: true);); gulp.task ('less', function () gulp.src ('styles / main.less') .pipe (less ()) .pipe (gulp.dest ('styles')) .pipe (connect.reload ( ));); gulp.task ('watch', function () gulp.watch ('styles / *. less', ['moins']);) gulp.task ('default', ['moins', 'serveur web', 'regarder']);

Reprenons gorgée dans le terminal et rouvrir localhost: 8080 dans le navigateur. Nous pouvons maintenant apporter des modifications à un fichier LESS dans le modes dossier. Il sera instantanément compilé et actualisé dans le navigateur. Notez que vous n'avez besoin d'aucune extension de navigateur. foie fonctionne hors de la boîte.

Quelques ajustements

S'il vous plaît garder à l'esprit que la précédente gulpfile.js est juste une démonstration minimale de la façon d’utiliser Gulp.js en tant que serveur Web avec foie. Je recommande fortement de jouer avec d'autres plugins. Vous devez également essayer de réorganiser la structure des tâches et utiliser le plugin non intégré gulp-watch, qui vous permet de traiter uniquement les fichiers modifiés. Cela devient important si vous travaillez avec une base de code plus grande. Nous verrons plus loin dans ce tutoriel à quoi une structure de tâches alternative pourrait ressembler.

Changer le nom d'hôte et le port

le gulp-connect Le plugin lui-même a de nombreuses options de configuration. Par exemple, vous pouvez modifier le port ou le nom d’hôte du serveur Web. Vous pouvez même utiliser un nom d’hôte personnalisé avec port 80 (par défaut est localhost: 8080).

connect.server (port: 80, hôte: 'gulp.dev');

Pour que cela fonctionne, nous devons avoir gulp.dev dans notre fichier hosts et lancez la commande sudo gulp. Les droits d'administrateur sont nécessaires pour utiliser le port 80.

Quelques fonctionnalités avancées

Vous pouvez aller encore plus loin en utilisant le plugin connect pour générer plusieurs serveurs Web en même temps. Cela devient utile, par exemple, si vous souhaitez exécuter un serveur Web de développement et exécuter des tests d'intégration., simultanément.

gulp-connect offre également la possibilité d'utiliser plusieurs répertoires en tant que dossier racine. Par exemple, lorsque vous utilisez CoffeeScript et que vous souhaitez enregistrer les fichiers JavaScript compilés dans un dossier temporaire, vous pouvez ensuite monter ce dossier sans polluer votre dossier source..

Pour plus d'exemples, veuillez consulter le référentiel GitHub..

Refactoring notre code

Dans l'exemple précédent, nous configurons un minimum gulpfile.js compiler les fichiers LESS en CSS et les injecter immédiatement dans le navigateur. Cela a fonctionné, mais nous pouvons faire mieux. Il peut être problématique que nous avons mélangé les compiler et foie entre dans une tâche. Alors, séparons-les et surveillons les changements dans les fichiers générés. Pour cela, nous utiliserons le précédent mentionné gueule-montre brancher.

Allons encore plus loin et ajoutons une étape de compilation CoffeeScript. Avec cette étape supplémentaire, la nouvelle structure devrait être plus claire. Nous installons les nouveaux plugins en un lot via:

npm installer --save-dev gulp-watch gulp-coffee 

Et exiger eux dans le haut de notre gulpfile.js. Dans la configuration suivante, je suppose que vous en avez déjà .café fichiers dans un répertoire appelé des scripts. Pour un exemple de configuration, veuillez consulter ce dépôt. Le refactored gulpfile.js pourrait ressembler à ce qui suit. Nous allons passer en revue les modifications, étape par étape.

var gulp = require ('gulp'), connect = require ('gulp-connect'), watch = require ('gulp-watch'), less = require ('gulp-less'), coffee = require ('gulp- café'); gulp.task ('webserver', function () connect.server (livereload: true, root: ['.', '.tmp']);); gulp.task ('livereload', function () gulp.src (['. tmp / styles / *. css', '.tmp / scripts / *. js']) .pipe (watch ()) .pipe ( connect.reload ());); gulp.task ('less', function () gulp.src ('styles / main.less') .pipe (less ()) .pipe (gulp.dest ('. tmp / styles'));); gulp.task ('café', fonction () gulp.src ('scripts / *. café') .pipe (café ()) .pipe (gulp.dest ('. tmp / scripts'));); gulp.task ('watch', function () gulp.watch ('styles / *. less', ['less'])); gulp.watch ('scripts / *. coffee', ['coffee']); ) gulp.task ('default', ['less', 'coffee', 'webserver', 'livereload', 'watch']);

Le plus grand changement que nous voyons est le supplément foie tâche. Cette tâche ne fait que surveiller (via le gueule-montre plugin) pour les modifications dans les fichiers compilés et les actualise dans le navigateur. La douane regarder() Cette fonction nous permet de recharger simplement les fichiers modifiés, alors que la fonction intégrée gulp.watch () commande rechargerait tous les fichiers et pas seulement ceux qui ont été modifiés.

En raison de cette tâche supplémentaire unique, nous n’avons pas besoin d’un .pipe (connect.reload ()) commande après chaque étape de compilation. Nous avons donc séparé les tâches par leurs préoccupations, ce qui est toujours une bonne idée dans le développement de logiciels.

Nous avons également remarqué que les fichiers compilés ne sont plus enregistrés dans leur dossier source respectif. Ils sont maintenant stockés dans un dossier temporaire nommé .tmp. Le contenu de ce dossier ne sont que des fichiers générés et ne pollueront pas le modes ou des scripts annuaires plus longtemps. Il est également recommandé d'exclure ce dossier de votre système de contrôle de révision. Tout ce que nous avons à faire pour que cela fonctionne, est également de monter .tmp en tant que dossier racine, qui est fait par

root: ['.', '.tmp']

Cette configuration refactorisée devrait fonctionner exactement comme celle d’avant. Mais c'est beaucoup plus propre et plus facile à étendre.

Conclusion

Vous venez d'apprendre à utiliser Gulp.js en tant que serveur Web. 

Vous pouvez combiner cette technique avec de nombreux autres cas d'utilisation, tels que le test ou la construction de votre application à une seule page. Notez que ce serveur Web est uniquement destiné au développement local. Pour la production, vous devez utiliser une solution plus performante telle que Nginx ou un CDN.. 

Notez que toutes les fonctionnalités présentées sont également possibles avec Grunt ou des projets similaires. Gulp.js fournit juste un très simple et élégant façon de faire les choses.