Share
Dans le tutoriel précédent, nous avons configuré un projet et utilisé Grunt pour regarder et compiler automatiquement Stylus et Jade. Dans ce tutoriel, nous allons faire la même chose, mais en utilisant un autre gestionnaire de tâches: Gulp.
Installez Gulp globalement avec:
[sudo] npm install gulp -g
Comme pour le processus Grunt, ajoutez un fichier «package.json» à votre projet à l'aide du npm init commander.
Installez Gulp dans votre projet et enregistrez-le en tant que dépendance de développement avec:
npm install gulp --save-dev
Parallèlement au «Gruntfile» de Grunt, Gulp utilise un «Gulpfile». Dans le dossier racine de votre «projet Gulp», ajoutez un fichier nommé «gulpfile.js»..
Pour commencer, nous allons donner au fichier l'accès au paquet «gulp» que vous venez d'installer dans votre dossier «node_modules», en ajoutant cette ligne en haut de votre fichier Gulp:
Accentsconagua
var gulp = require ('gulp');Strictement parlant, Gulp ne fait pas avoir besoin utiliser les plugins Gulp car il peut utiliser des paquets vanilla npm. Cependant, il existe plusieurs plug-ins disponibles spécialement optimisés pour une utilisation avec Gulp, et lorsque vous débutez, vous les trouverez plus faciles à utiliser..
Recherchez les plugins Gulp sur: http://gulpjs.com/plugins/
Nous allons installer ces plugins:
Ces plugins remplissent essentiellement les mêmes rôles que ceux utilisés avec Grunt, à quelques différences près..
Premièrement, il n’est pas nécessaire d’installer un plugin «watch», car Gulp en a un intégré.
Deuxièmement, nous installons le plug-in “gulp-concat” afin de rassembler tous nos fichiers (les concaténer) avant de minimiser le tout. Merci à Dan de l'avoir signalé!
Remarque: nous utilisons un plugin nommé “gulp-minify-css” mais il utilise le même paquet “clean-css” que vous avez utilisé jusqu'à présent.
Avec votre terminal pointé sur votre dossier «Gulp Project», exécutez chacune de ces commandes:
npm installer gulp-stylus --save-dev
npm installer gulp-autoprefixer --save-dev
npm installez gulp-minify-css --save-dev
npm installez gulp-jade --save-dev
npm installez gulp-uglify --save-dev
npm installer gulp-concat --save-dev
Une fois que vous avez terminé, vous devriez voir ces dossiers dans le dossier «node_modules» de votre projet:
Plus ou moins… Comme nous l'avons fait avec Grunt, nous devons activer chacun des plugins, cette fois dans notre fichier Gulp. Au lieu de la méthode de Grunt grunt.loadNpmTasks, nous allons utiliser le exiger fonction native à NodeJS.
Ajoutez ces lignes à votre fichier Gulp, en dessous de la ligne que vous avez déjà ajoutée.
var stylus = require ('gulp-stylus'); var autoprefixer = require ('gulp-autoprefixer'); var minifyCSS = require ('gulp-minify-css'); var jade = require ('gulp-jade'); var uglify = require ('gulp-uglify'); var rename = require ('gulp-rename'); var concat = require ('gulp-concat');Cette approche est différente de Grunt en ce sens que nous n’avons encore enregistré aucune commande pouvant être exécutée à ce stade. Au lieu de cela, nous venons de créer des variables JavaScript, chacune représentant nos plugins, que nous pourrons utiliser plus tard dans notre fichier Gulpfile..
L'une des principales différences entre Grunt et Gulp est que, avec Gulp, vous n'avez pas besoin de configurer individuellement une tâche pour chaque plug-in que vous utilisez dans votre projet. Au lieu de cela, vous ne configurez que les tâches pour le commandes tu veux courir.
Dans notre fichier Gruntfile, nous avions précédemment défini une tâche distincte pour Stylus, Autoprefixer et clean-css. Dans notre fichier Gulp, nous n'avons pas besoin de faire cela. Nous savons que chaque fois que nous compilons notre code Stylus, nous souhaitons que le code CSS résultant soit auto-préfixé et modifié, nous allons donc créer une seule tâche pour effectuer toutes ces opérations à la fois..
Ajoutez ce code au bas de votre fichier Gulp:
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')));Décomposons ce que nous avons fait.
Tout d'abord, nous utilisons gulp.task () définir une nouvelle tâche nommée css, et faire de la place pour une fonction JavaScript qui sera exécutée à chaque exécution de la commande gulp css:
gulp.task ('css', function () );Ensuite, nous utilisons gulp.src () pour définir le fichier source que nous voulons traiter sur le fichier “source / stylus / main.styl”:
gulp.task ('css', function () gulp.src ('source / stylus / main.styl'));Ensuite, nous commençons à utiliser Gulp's tuyau() fonction pour appeler chacun de nos plugins. Le chemintuyau() fonctionne est comme des tuyaux physiques, où vous introduisez quelque chose dans le premier tuyau et il passe ensuite à travers chaque tuyau connecté.
Notre premier "pipe" ajoute la compilation Stylus, en utilisant la même compresse et les chemins comme nous l’avions déjà fait avec Grunt:
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (compress: false, chemins: ['source / stylus'])) ;Nous connectons ensuite un deuxième canal, qui prend le code compilé et ajoute le préfixe automatique:
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (compress: false, chemins: ['source / stylus']))) .pipe (auto-préfixe ()));Nous connectons un troisième tuyau, en prenant notre CSS préfixé et en le nettoyant:
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (compress: false, chemins: ['source / stylus']))) .pipe (autoprefixer ()) .pipe (minifyCSS ()));À ce stade, si nous devions générer un fichier CSS, celui-ci serait nommé «main.css» pour correspondre au fichier source «main.styl» avec lequel nous avons commencé. Nous allons donc connecter un quatrième canal pour renommer le fichier avec le style “style.css”:
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')));Enfin, nous connectons notre cinquième et dernier canal pour envoyer notre fichier CSS fini à sa destination, en utilisant gulp.dest () pour définir notre dossier de sortie pour être "construire".
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')));Maintenant le css La tâche que vous venez de créer est prête à partir. Dans le dossier racine de votre projet, exécutez:
gulp css
… Et votre fichier Stylus sera compilé, auto-préfixé, nettoyé puis exporté dans votre dossier «build» en tant que «style.css».
Nous utiliserons à nouveau le même processus pour configurer notre tâche pour la compilation Jade. Nous allons créer une tâche nommée html, paramétrez-le pour utiliser tous les fichiers «.jade» du dossier «source / jade» comme source, dirigez la compilation Jade, puis envoyez le ou les fichiers HTML résultants dans notre dossier «build»..
Ajoutez ce code sous la css tâche que vous venez de créer:
gulp.task ('html', function () gulp.src ('source / jade / *. jade') .pipe (jade ()) .pipe (gulp.dest ('build')));Exécutez votre nouvelle tâche avec la commande:
avaler html
… Et vous verrez chacun de vos fichiers Jade compilés en fichiers HTML correspondants dans votre dossier «build».
Maintenant, nous allons utiliser la même approche une fois de plus, en mettant en place une tâche nommée js prendre les fichiers jQuery et Modernizr de notre dossier «bower_components», les uglify (concaténer et les minifier), puis exporter le code sous forme de fichier nommé «output.min.js» dans notre dossier «build».
gulp.task ('js', function () gulp.src (['bower_components / jquery / dist / jquery.js', 'bower_components / modernizr / modernizr.js']) .pipe (concat ('output.min. js ')) // concat rassemble tous nos fichiers avant de les réduire .pipe (uglify ()) .pipe (gulp.dest (' build ')));Remarque: dans ce cas, nous voulons spécifier deux fichiers sources, nous passons donc les deux noms de fichiers sous forme de tableau, c'est-à-dire des valeurs séparées par des virgules entre crochets.
Courez votre js tâche avec la commande
avaler js
… Et vous verrez un nouveau fichier nommé “output.min.js” apparaître dans votre dossier “build”, contenant jQuery et Modernizr sous une forme minifiée.
Maintenant que nous avons notre coutume css et html configuration des tâches, nous pouvons utiliser Gulp en constructiongulp.watch () fonctionner afin qu'ils courent automatiquement pour nous.
Ajoutez ce code au bas de votre fichier Gulp pour créer un regarder tâche:
gulp.task ('watch', function () gulp.watch ('source / stylus / *. styl', ['css'])); gulp.watch ('source / jade / *. jade', ['html ']););La première utilisation de gulp.watch () définit le css tâche à exécuter chaque fois qu'un fichier “.styl” dans le dossier “source / stylet” est modifié.
La deuxième utilisation de gulp.watch () définit le html tâche à exécuter chaque fois qu'un fichier “.jade” dans le dossier “source / jade” est modifié.
Courez votre regarder tâche avec la commande
regarder gulp
… Et chaque fois que vous sauvegardez les modifications apportées à l'un de vos fichiers Stylus ou Jade, votre compilation sera gérée automatiquement.
Comme nous l'avons fait avec notre projet Grunt, nous allons terminer en créant une tâche par défaut qui s'exécutera chaque fois que nous utiliserons la commande gorgée par lui-même.
Ajoutez cette ligne au bas de votre fichier Gulpfile:
gulp.task ('default', ['css', 'html', 'js']);Nous utilisons cette tâche pour construire l'ensemble de notre projet, y compris JavaScript, en le faisant exécuter css, html et js les tâches.
Pour construire votre projet entier avec la tâche par défaut, utilisez la commande suivante:
gorgée
Nous ajouterons ensuite la touche finale à vos projets Grunt et Gulp, ce qui en fera vraiment des machines à efficacité ultime: le rechargement en direct et la synchronisation du navigateur..
Vous apprendrez à créer une commande qui lance votre projet sur un aperçu localhost, c’est-à-dire simuler un hôte Web sur votre ordinateur local à l’aide d’un http: // protocole au lieu d'unfichier:// protocole pour prévisualiser votre site.
Et à mesure que les fichiers source de votre projet sont surveillés et compilés automatiquement, votre aperçu localhost sera automatiquement rechargé de sorte que, dès que vous aurez enregistré vos modifications, vous les verrez reflétées dans le navigateur..
Nous allons ensuite configurer votre aperçu localhost de sorte que tous les navigateurs dans lesquels vous le visualisez soient synchronisés, y compris les navigateurs de différents périphériques connectés à la même connexion Internet, tels que les tablettes et les téléphones. Ouvrez un menu dans un navigateur, voyez comment il réagit dans tous les autres navigateurs et appareils en même temps..
!
