Share
Si vous travaillez sur un projet volumineux, vous aurez sans doute un script de construction ou un ensemble de scripts de tâches pour vous aider avec certaines des parties répétitives du processus. Vous pouvez utiliser Ant ou Rake, selon la langue dans laquelle le projet est écrit..
Mais qu'utilisez-vous si le projet est principalement JavaScript? C'est le problème que Ben Alman a tenté de résoudre en créant Grunt..
Qu'est-ce que Grunt? Eh bien, le fichier README sur Github dit
Grunt est un outil de création de ligne de commande basé sur des tâches pour les projets JavaScript..
Voici l’idée: lorsque vous travaillez sur un projet JavaScript, vous voudrez faire un tas de choses régulièrement. Comme quoi, tu demandes? Bien, comme concaténer des fichiers donnés, exécuter JSHint sur votre code, exécuter des tests ou réduire vos scripts. Si vous collez votre code JavaScript dans JSHint en ligne, vous vous rendrez probablement compte qu'il existe un meilleur moyen de le faire. même si vous utilisez chat pour concaténer des fichiers ou un minifier en ligne de commande, il serait bien d’avoir un seul et même ensemble de commandes pour toutes ces tâches supplémentaires, fonctionnant pour chaque projet JavaScript, à droite?
C'est ce que Grunt veut être. Il a un tas de tâches intégrées qui vous mènera assez loin, avec la possibilité de créer vos propres plugins et scripts qui étendent les fonctionnalités de base.
Pour plus d'informations sur Grunt Intro, voir l'article de Ben sur son blog personnel et le blog de Bocoup..
Grunt est construit sur Node.js et est disponible sous forme de package via le gestionnaire de package Node (npm). Vous voudrez l'installer globalement, utilisez donc cette commande:
npm installer -g grunt
Vous remarquerez qu'il installe plusieurs dépendances; Grunt utilise d’autres paquetages npm. Une fois que cela est fait, vous êtes prêt à partir!
Comme vous le savez, Grunt est un outil de ligne de commande. par conséquent, je suppose que vous avez une fenêtre de terminal ouverte pour le reste de ce didacticiel..
Commençons par créer un exemple de répertoire de projet. nous ne construirons pas de projet ici, mais nous verrons comment Grunt fonctionne dans ce répertoire. Une fois dans ce répertoire, lancez la commande grognement commande (selon la documentation, si vous utilisez Windows, vous devrez peut-être exécuter grunt.cmd). Vous verrez probablement quelque chose comme ça:
Impossible de trouver le fichier de configuration 'grunt.js'. Avez-vous besoin d'aide?
Avant de pouvoir exploiter pleinement le potentiel de Grunt, vous aurez besoin d’un grunt.js fichier dans le répertoire du projet. Heureusement, Grunt peut générer automatiquement un grunt.js fichier-et un autre matériel squelette de projet-avec le init tâche, qui peut s'exécuter sans grunt.js fichier en place. Mais grunt init Ce n’est toujours pas suffisant pour démarrer votre projet, comme vous le verrez si vous l’exécutez. Vous devez choisir un type de projet à générer. Fonctionnement grunt init vous donnera une liste de types de projets parmi lesquels choisir:
Accentsconagua
jquery: Un plugin jQuerynœud: Un module de nœudpoints communs: Un module CommonJSgruntplugin: Un plugin Gruntgruntfile: Un fichier Grunt (grunt.js)Si votre projet ne correspond vraiment à aucun des quatre premiers types de projet, vous pouvez utiliser le dernier: gruntfile: il crée juste une base grunt.js que vous pouvez remplir. Essayons-le avec le modèle de plugin jQuery. Courir grunt init: jquery dans votre terminal.
Vous remarquerez beaucoup de sortie initiale. Si vous prenez le temps de lire les notes de modèle, vous constaterez que nous allons devoir renseigner quelques valeurs, telles que le nom du projet et son titre. En fait, après cette note, vous verrez quelque chose comme ceci:
Veuillez répondre aux questions suivantes: [?] Nom du projet (jquery.demo)
Chaque fois que vous initialisez un projet, Grunt vous posera une série de questions afin de pouvoir renseigner quelques options. Cette valeur entre parenthèses? C'est la suggestion par défaut, basée sur le type de projet et le nom du répertoire du projet. Si vous voulez le changer, écrivez votre propre nom de projet à la fin de la ligne et appuyez sur 'entrer'; sinon, appuyez simplement sur 'entrée' pour utiliser le nom par défaut.
Continuez et remplissez le reste des champs. Pour un projet de plug-in jQuery, voici ce qu'il vous faudra ajouter:
Beaucoup d'entre eux ont des valeurs par défaut; si vous voulez utiliser la valeur par défaut, appuyez simplement sur entrée pour cette ligne; pour laisser le champ vide, vous pouvez simplement taper «aucun». Une fois que vous avez parcouru toutes les options, vous verrez que Grunt crée des fichiers de projet de base. Comme ça? Comme ça:
LICENCE-GPL LICENSE-MIT LISEZ-MOI.md librairies grunt.js | - jquery | | - jquery.js | - qunit | - qunit.css | - qunit.js package.json src | - test jquery.demo.js | - jquery.demo.html | - jquery.demo_test. js
Comme vous pouvez le constater, cela nous donne un bon départ: nous avons non seulement notre fichier de plugin (src / jquery.demo.js), nous avons également des tests Qunit (test / jquery.demo_test.js). Et ce ne sont pas non plus des fichiers vides. Ils ont un contenu initial, avec un plugin jQuery très basique et des tests unitaires. Allez-y et vérifiez le contenu de ces fichiers, vous verrez ce que je veux dire.
Grunt fait plus que mettre en place le projet pour vous.
Bien entendu, Grunt fait plus que configurer le projet pour vous. Notamment, notre projet a maintenant grunt.js: un fichier de configuration spécifique au projet; En raison des options qu'il définit, nous pouvons maintenant utiliser les autres tâches intégrées de Grunt. Bientôt nous allons le casser et faire quelques ajustements, mais pour l'instant, exécutons quelques tâches.
Si vous courez grognement sans options maintenant, nous exécuterons la tâche par défaut, si elle a été définie. Dans le cas d'un projet de plug-in jQuery, cela équivaut à exécuter ces quatre commandes:
peluche: vérifie votre JavaScript contre JSHintgrunt qunit: lance vos tests Qunitgrunt concat: concatène vos fichiers de projet et place le nouveau fichier dans un dist dossiergrunt min: réduit le fichier concat éteindre.Je devrais noter ici quelque chose à propos des tests Qunit: les tests Qunit sont conçus pour s’exécuter par défaut dans le navigateur; viens d'ouvrir tests / jquery.demo.html (ou votre équivalent) dans le navigateur. Cependant, le grunt qunit test veut les exécuter sur le terminal, ce qui signifie que vous devez installer PhantomJS. Ce n'est pas difficile: rendez-vous sur phantomjs.org pour télécharger et installer la dernière version. Si Grunt peut trouver cela dans votre chemin, il pourra exécuter les tests Qunit à partir du terminal..
Alors, en cours d'exécution grognement devrait vous donner une sortie semblable à celle-ci:
Comme vous pouvez le constater, chacune de nos quatre tâches a été exécutée. Si l’un d’eux échouait, le reste des tâches serait annulé (sauf si vous appelez Grunt avec le --Obliger drapeau).
Déjà, Grunt nous a fourni une grande quantité de fonctionnalités, en les utilisant telles quelles. Cependant, ouvrons cette grunt.js déposer et faire un peu de configuration.
À l'intérieur grunt.js, vous verrez que toute la configuration se fait en passant un littéral d'objet à grunt.initConfig (). Regardons quelques propriétés de notre objet config.
pkgCette propriété pointe vers le package.json fichier que Grunt a créé dans notre répertoire de projet. Avoir un package.json le fichier fait partie de la spécification CommonJS Packages; c'est un endroit unique où la plupart des métadonnées sur le projet (nom, version, page d'accueil, lien de référentiel… beaucoup des valeurs que vous avez définies lors de l'initialisation du projet) peuvent être stockées. Cependant, cela pkg propriété fait plus que pointer vers le fichier de package: notez la syntaxe: '. C’est l’une des directives intégrées de Grunt: il charge en fait le fichier JSON. Grunt (ou vous-même) peut donc accéder à toutes les propriétés du fichier package.json à partir du fichier. pkg propriété.
métale méta propriété est un objet avec une seule propriété: une bannière. Cette bannière est le commentaire placé en haut des fichiers de projet concaténés ou minifiés. Comme vous pouvez le constater, il s’agit d’une chaîne contenant des balises de modèle (<%= %>) dans la plupart des cas, les balises entourent un appel à une propriété sur le pkg biens, tels que pkg.title. Cependant, vous pouvez également exécuter des fonctions depuis ces balises: l’utilisation de grunt.template.today () et _.cueillir() nous montre que.
concat / min / qunit / peluche / regarder J'ai regroupé les cinq propriétés suivantes parce qu'elles sont très similaires. Ils définissent tous des options pour des tâches spécifiques, les tâches pour lesquelles ils ont été nommés. Lors de la configuration de ces tâches, il est important de noter que Grunt a distingué deux types de tâches: les tâches standard et les tâches multiples. La différence réside essentiellement dans le fait que les tâches ordinaires ne disposent que d’un seul ensemble d’options de configuration, alors que les tâches multiples peuvent avoir plusieurs ensembles d’instructions (appelées des cibles). Parmi les cinq tâches que j'ai énumérées dans l'en-tête de cette section, la seule qui ne soit pas une tâche multitâche est regarder.
Notez que dans notre objet config, le qunit et peluche les propriétés sont les deux objets avec le des dossiers propriété. des dossiers est une cible unique pour cette tâche. Dans les deux cas, il s'agit d'un tableau de fichiers à utiliser lors de l'exécution de cette tâche. Disons que je veux être en mesure de ne peluche que les fichiers src sous-répertoire. Je pourrais ajouter une autre cible pour que le peluche propriété ressemblerait à ceci:
lint: fichiers: ['grunt.js', 'src / ** / *. js', 'test / ** / *. js'], src: ['src / ** / *. js'],
Maintenant, ne peluche que les fichiers de src, je cours peluche: src: Je passe le nom de la cible après un colon. Si je cours seulement peluche, les deux cibles seront exécutées.
Dans le cas du concat et min tâches, les cibles sont plus compliquées: ce sont des objets avec source (src) et destination (dest) Propriétés. Bien sûr, cela indique à Grunt où récupérer les fichiers et où les placer une fois le traitement terminé. Si vous ajoutez d'autres fichiers à votre projet, vous voudrez les ajouter au bon endroit pour vous assurer qu'ils sont concaténés et minifiés correctement. Donc, si j'ai ajouté un src / utils.js fichier dont dépend mon plugin jQuery, je changerais concat.dist.src pour ça:
