Share
Jusqu'à présent, vous avez appris à compiler du code, à préfixer automatiquement, à nettoyer, à compresser et à réduire au minimum, en tapant quelques mots. C'est formidable, mais que se passe-t-il si vous avez un projet qui nécessite que vous exécutiez plusieurs de ces commandes, l'une après l'autre, encore et encore jusqu'à ce que vous ayez terminé votre travail? Par exemple:
Même avec quelques mots par commande, cela deviendrait rapidement fastidieux tout au long du processus de création d'un site typique.
C'est là que les «Task Runners» entrent en jeu pour sauver la journée. Avec les gestionnaires de tâches, vous pouvez configurer un seul fichier dans votre projet, qui définit toutes les tâches à exécuter sur votre projet et leur ordre d'exécution. Dans ce fichier, vous pouvez ensuite définir des commandes personnalisées que vous pouvez utiliser pour exécuter toutes ces tâches. tâches une fois.
Vous apprendrez à configurer les coureurs de tâches de cette manière grâce à ce didacticiel. Vous découvrirez également un exemple d'introduction de scripts provenant de packages Bower pour un déploiement efficace dans vos projets..
Remarque: Ce tutoriel suppose que vous avez terminé tous les tutoriels précédents de cette série. Si vous ne l'avez pas encore fait, il vous sera utile de les parcourir avant de commencer ici..
Il existe actuellement plusieurs tâches disponibles, mais pour les besoins de ce tutoriel, nous allons nous concentrer sur les deux qui sont actuellement les plus populaires: Grunt et Gulp..
Il existe plusieurs différences techniques entre les deux projets, que je ne vais pas aborder maintenant. Je ne vous dirai pas non plus lequel des deux vous devez utiliser. Au lieu de cela, je vous recommande de suivre les étapes pour utiliser les deux ci-dessous puis de décider vous-même lequel vous préférez.
Nous allons créer un projet qui surveille et compile automatiquement Stylus et Jade, et optimise CSS et JavaScript. Nous y arriverons d’abord en utilisant Grunt, puis (dans le prochain tutoriel) en utilisant Gulp.
Pour commencer, nous aurons besoin de configurer un exemple de projet contenant certains fichiers sur lesquels notre gestionnaire de tâches peut opérer. Créez un dossier nommé «Projet Grunt», puis ajoutez un sous-dossier nommé «build» et un sous-dossier nommé «source»..
Dans le dossier «source», ajoutez deux nouveaux sous-dossiers nommés «stylet», «jade». Ajoutez quelques exemples de fichiers du type approprié à chaque dossier.
Les fichiers peuvent contenir le code de votre choix, afin que vous puissiez voir le processus de compilation en cours..
Pointe: si vous ne savez pas quel code ajouter, essayez de récupérer un exemple de code chez Codepen: stylet avec stylet, stylos avec jade.
Par exemple:
Nous allons également tirer parti de ce que nous avons appris sur Bower lors d’une leçon précédente et récupérer des téléchargements de jQuery et Modernizr, que nous combinerons et réduirons plus tard..
Exécutez les commandes:
bower installer jquery --save
bower installer modernizr --save
Maintenant, faites une copie de votre dossier de projet entier et renommez-le "Projet Gulp".
De cette façon, vous pouvez suivre les étapes pour utiliser Grunt dans votre dossier «Grunt Project» et les étapes pour utiliser Gulp dans votre dossier «Gulp Project»..
Pour que les commandes Grunt fonctionnent, vous devez installer son interface de ligne de commande (CLI). Installez-le globalement avec:
[sudo] npm installer -g grunt-cli
Chaque projet utilisant Grunt aura besoin d'un fichier «package.json» dans le dossier racine..
Nous avons couvert la configuration d’un fichier «package.json» à l’aide de la commande npm init dans le précédent tutoriel Taming 3rd Party Packages. Si vous n'avez pas encore terminé cette section, revenez en arrière et suivez-la maintenant..
Installez Grunt dans votre projet et enregistrez-le en tant que dépendance de développement avec:
npm installer grunt --save-dev
Chaque projet Grunt doit également avoir ce qu’on appelle un Gruntfile dans le dossier racine.
Un Gruntfile est un fichier nommé «Gruntfile.js» ou «Gruntfile.coffee» si vous préférez écrire en CoffeeScript. Dans notre cas, nous allons utiliser JavaScript, ajoutez donc un fichier nommé «Gruntfile.js» à votre dossier racine..
Remplir votre fichier Grunt vous permettra de déterminer quelles commandes déclencheront les tâches à exécuter. Vous pouvez commencer en ajoutant simplement un shell basique dans votre Gruntfile. Nous allons configurer votre code de configuration réel plus tard.
Ajoutez le code suivant à votre fichier Gruntfile.js:
module.exports = function (grunt) ;
Vous vous souviendrez que lorsque vous vouliez utiliser des packages avec npm ou Bower, vous deviez rechercher au bon endroit pour obtenir les versions conçues pour fonctionner avec chaque système..
La même chose se passe lors de l'utilisation de paquets avec Grunt. Grâce à Grunt, vous pouvez accéder à un écosystème de plugins, qui sont essentiellement des wrappers autour de packages vanilla npm. Ces plugins sont toujours livrés via npm, mais ils sont spécialement équipés pour fonctionner avec Grunt.
Par exemple, au lieu du paquet npm UglifyJS, avec Grunt, vous pouvez utiliser le plugin “grunt-contrib-uglify”..
Vous pouvez rechercher des plugins Grunt sur http://gruntjs.com/plugins
Pour notre projet, nous allons installer ces six plugins Grunt:
Chacun sera installé dans le sous-dossier «node_modules» de votre dossier de projet et sauvegardé en tant que dépendance de développement..
Exécutez chacune de ces commandes, une à la fois, avec votre terminal pointé sur votre dossier «Grunt Project»:
npm installer grunt-contrib-stylus --save-dev
npm installer grunt-autoprefixer --save-dev
npm installer grunt-contrib-cssmin --save-dev
npm installer grunt-contrib-jade --save-dev
npm installer grunt-contrib-uglify --save-dev
npm installer grunt-contrib-watch --save-dev
Une fois que vous avez terminé, vous devriez voir ces dossiers dans le dossier «node_modules» de votre projet:
Maintenant, nous allons utiliser le grunt.loadNpmTasks méthode pour activer nos plugins.
À l'intérieur des accolades de votre Gruntfile existant, nous ajouterons six lignes, une pour activer chaque plugin Grunt, comme suit:
Accentsconagua
module.exports = function (grunt) // Chargement des plugins Grunt. grunt.loadNpmTasks ('grunt-contrib-stylus'); grunt.loadNpmTasks ('grunt-autoprefixer'); grunt.loadNpmTasks ('grunt-contrib-cssmin'); grunt.loadNpmTasks ('grunt-contrib-jade'); grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.loadNpmTasks ('grunt-contrib-watch'); ;Ce code enregistre le nom de chaque plug-in en tant que commande grunt, ce qui nous permet d'utiliser cette commande pour que le plug-in exécute une tâche. Par exemple, nous utiliserions la commande stylet grunt exécuter une tâche de stylet,grunt autoprefixer pour exécuter une tâche de préfixe automatique et ainsi de suite.
Nos plugins Grunt sont installés et les commandes à utiliser sont opérationnelles. Cependant, si vous les utilisiez maintenant, rien ne se passerait. La raison en est que nous devons configurer certaines configurations pour déterminer ce que chaque tâche doit réellement faire..
Ceci est fait en ajoutant le grunt.initConfig méthode à votre Gruntfile, puis en passant des informations qui dictent comment vous voulez que chaque tâche soit exécutée.
Tout d'abord, nous allons ajouter le grunt.initConfig méthode ci-dessus les lignes que vous venez d'ajouter pour charger les plugins grunt:
grunt.initConfig ();
Nous allons maintenant laisser un peu d’espace pour que nous puissions passer nos informations de configuration. Ajoutez des accolades ouvrantes et fermantes à l'intérieur des accolades régulières, puis ajoutez une ligne vide entre elles:
grunt.initConfig ();
Maintenant, nous pouvons continuer et ajouter la configuration pour chacun des plugins que nous avons installés.
Chaque plugin a sa propre gamme de paramètres que vous pouvez utiliser, et ces options sont détaillées dans les pages liées à la section «Installer des plugins Grunt» ci-dessus..
Vous pouvez également lire tous les détails sur la configuration des tâches Grunt ici: http://gruntjs.com/configuring-tasks
Nous allons commencer par ajouter une configuration pour notre style tâche.
Entre les accolades que vous venez d'ajouter, sur la ligne vide, ajoutez le code suivant:
stylet: compile: options: compresser: false, chemins: ['source / stylus'], fichiers: '' build / style.css ':' source / stylus / main.styl ',
Votre Gruntfile devrait maintenant ressembler à ceci:
module.exports = fonction (grunt) grunt.initConfig (stylus: compile: options: compresse: false, chemins: ['source / stylus'], fichiers: 'build / style.css': source / stylus / main.styl ',); // Charge les plugins Grunt. grunt.loadNpmTasks ('grunt-contrib-stylus'); grunt.loadNpmTasks ('grunt-autoprefixer'); grunt.loadNpmTasks ('grunt-contrib-cssmin'); grunt.loadNpmTasks ('grunt-contrib-jade'); grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.loadNpmTasks ('grunt-contrib-watch'); ; Passons en revue le code que nous avons ajouté ici. Nous ne détaillerons pas chaque tâche, mais celle-ci devrait vous donner une idée du type de syntaxe utilisée lors de la configuration de la tâche Grunt..
Comme mentionné ci-dessus, chaque plugin a différentes options de configuration. Ainsi, lorsque vous utilisez un nouveau plugin, examinez bien les instructions d'utilisation qu'il propose..
La première chose que nous avons faite est d’ajouter une entrée dans notre config pour notre style tâche avec le code:
stylet: ,
À l'intérieur, nous avons ajouté un compiler entrée pour contrôler ce qui se passe pendant la compilation:
stylet: compile: ,
À l'intérieur de compiler tâche que nous avons créé un options surface.
Nous avons utilisé cette zone pour définir la compresse option de faux, parce que nous allons faire notre optimisation de code plus tard.
Nous avons également défini le les chemins option de ['source / stylet'] donc si Stylus voit le @importation Lors de la compilation, la directive recherchera les fichiers à importer dans le dossier «source / stylus» du projet:
stylet: compile: options: compress: false, chemins: ['source / stylus'],
Puis après le options zone nous avons ajouté un des dossiers zone pour contrôler le répertoire de sortie et le nom du fichier, ainsi que le répertoire d'entrée et le nom du fichier.
Nous avons défini l'emplacement de sortie de notre fichier CSS compilé pour être 'build / style.css', tandis que le fichier Stylus à traiter est 'source / stylus / main.styl'.
stylet: compile: options: compresser: false, chemins: ['source / stylus'], fichiers: '' build / style.css ':' source / stylus / main.styl ',
Maintenant, avec votre terminal pointé sur votre dossier racine principal, exécutez la commande:
stylet grunt
Regardez dans votre dossier "build" et vous devriez voir un fichier "style.css" nouvellement compilé.
Nous allons maintenant passer assez rapidement à travers la configuration de chaque tâche restante. Insérez chaque bloc de code de configuration immédiatement après celui que vous avez précédemment ajouté.
Ajoutez ce code:
préfixe automatique: compile: fichiers: 'build / style.css': 'build / style.css',,,
Exécutez la tâche de préfixe automatique avec:
grunt autoprefixer
Si vous inspectez votre fichier «build / style.css», vous devriez maintenant voir les préfixes ajoutés si nécessaire.
Ajoutez ce code:
cssmin: clean: fichiers: 'build / style.css': 'build / style.css',
Exécutez la tâche cssmin avec:
grunt cssmin
Si vous regardez votre "build / style.css" à nouveau, vous verrez qu'il a été nettoyé et compressé pour vous.
Ajoutez ce code:
jade: compile: files: [expand: true, cwd: "source / jade", src: "* .jade", dest: "build", ext: ".html",
Exécutez la tâche jade avec:
Grunt Jade
Si vous regardez dans votre dossier «build», vous devriez maintenant voir un fichier HTML qui correspond à chaque fichier Jade que vous aviez dans votre dossier «source / jade»..
Ajoutez ce code:
uglify: bower_js_files: files: 'build / output.min.js': ['bower_components / jquery / dist / jquery.js', 'bower_components / modernizr / modernizr.js'],
Dans cet exemple, vous verrez que nous faisons référence aux emplacements des composants Bower que nous avons installés précédemment..
Nous récupérons les versions complètes développées de jQuery et Modernizr dans notre dossier «bower_components», puis nous les concaténons et les minifions dans un nouveau fichier nommé «output.min.js». C'est un excellent moyen de déployer les scripts que vous gérez avec Bower..
Exécutez la tâche d'ugification avec:
grogner uglify
Vous devriez maintenant voir un nouveau fichier “output.min.js” dans votre dossier “build”.
Jusqu'ici, il semblerait que nous ayons simplement remplacé une commande par une autre, mais ce que nous avons réellement fait est de jeter les bases d'un terrain où Grunt commence vraiment à briller..
La clé est la capacité de Grunt à avoir une tâche exécuter une autre tâche. Alors maintenant, nous allons configurer un regarder tâche qui surveillera certains fichiers pour les modifications, puis exécutez notre style et jade tâches automatiquement pour nous.
Ajoutez ce code:
watch: stylus: fichiers: ['source / stylus / *. styl'], tâches: ['stylet', 'autoprefixer', 'cssmin'], jade: fichiers: ['source / jade / *. jade '], tâches: [' jade '],
Nous avons d'abord ajouté notre regarder tâche, puis à l'intérieur que nous avons configuré une zone pour style et pour jade.
le des dossiers option dans chaque définit quels fichiers doivent être surveillés pour les changements. le les tâches L’option définit quelles tâches doivent ensuite être exécutées lorsque des changements se produisent et dans quel ordre..
Pour style, nous avons configuré la tâche de surveillance pour surveiller tous les fichiers «.styl» dans le dossier «source / stylet», et quand il voit les modifications, il lance le style, préfixe automatique et cssmin tâches dans cet ordre.
Alors maintenant, lorsque la tâche de surveillance est en cours d'exécution, tout ce que vous avez à faire est de sauvegarder l'un de vos fichiers Stylus et vous obtiendrez automatiquement un fichier CSS compilé, avec préfixe automatique et optimisé, écrit dans le dossier «build» pour vous..
De même pour jade, nous avons défini tous les fichiers «.jade» du dossier «source / jade» à surveiller, et chaque fois qu’un fichier est sauvegardé, le jade La tâche sera automatiquement exécutée et compilera le fichier HTML correspondant dans le "build" .
Exécutez la tâche de surveillance avec:
grunt regarder
Arrêtez-le à nouveau par:
À ce stade, vous vous demandez peut-être ce qu’en est la tâche d’extensibilité de JavaScript?
La raison pour laquelle nous ne l'avons pas inclus avec le regarder La tâche est que vous n'allez pas modifier les fichiers jQuery et Modernizr que la tâche uglify est en train de traiter. Donc parce que le regarder la tâche ne répond qu'aux changements, le traitement de votre JavaScript ne serait jamais déclenché.
Au lieu de cela, nous allons utiliser le défaut tâche qui peut être définie dans votre Gruntfile. C’est la tâche qui sera exécutée si vous utilisez la commande grognement par lui-même avec rien ajouté.
Après votre dernier grunt.loadNpmTasks ligne, mais avant la fermeture ; du fichier, ajoutez cette ligne:
grunt.registerTask ('default', ['stylus', 'autoprefixer', 'cssmin', 'jade', 'uglify']); Cela définit le défaut tâche à exécuter style, préfixe automatique, cssmin, jade et alors enlaidir.
Alors maintenant, si vous exécutez la commande grognement sans rien après, il construira votre projet entier, y compris votre JavaScript.
Nous allons répéter le processus que nous venons d'apprendre, mais en utilisant Gulp pour gérer notre tâche en cours d'exécution à la place de Grunt..
