Comment installer Grunt et comment créer un script avec

86

Salut, j'essaye d'installer Grunt sur Windows 7 64 bits. J'ai installé Grunt à l'aide de commandes

 npm install -g grunt
 npm install -g grunt-cli

mais maintenant, si j'essaie de le faire grunt init, cela me lance une erreur -

Un Gruntfile valide n'a pas pu être trouvé. Veuillez consulter le guide de démarrage pour plus d'informations sur la configuration de grunt: http://gruntjs.com/getting-started Erreur fatale: impossible de trouver Gruntfile.

Mais quand je regarde à l'intérieur du dossier grunt sur mon système, Gruntfile.jsil y a. Quelqu'un peut-il s'il vous plaît me guider comment installer correctement ce grunt et comment écrire un script construit en utilisant le grunt. J'ai une page HTML et un script java si je souhaite créer un script à l'aide de Grunt, comment puis-je le faire?

npm gruntjs npm-install Sau
la source
1
npm install -g gruntsignifie installer Grunt globalement, ce qui n'est plus recommandé (à partir de Grunt 0.4).
Ludder

Réponses:

229

Pour configurer la construction de GruntJS, voici les étapes:

  1. Assurez-vous que vous avez configuré votre package.jsonou en configurer un nouveau:

    npm init

  2. Installez Grunt CLI en tant que global:

    npm install -g grunt-cli

  3. Installez Grunt dans votre projet local:

    npm install grunt --save-dev

  4. Installez tout module Grunt dont vous pourriez avoir besoin dans votre processus de construction. Juste pour le plaisir de cet exemple, je vais ajouter le module Concat pour combiner des fichiers ensemble:

    npm install grunt-contrib-concat --save-dev

  5. Vous devez maintenant configurer votre Gruntfile.jsqui décrira votre processus de construction. Pour cet exemple, je combine simplement deux fichiers JS file1.jset file2.jsdans le jsdossier et génère app.js:

    module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
        concat: {
            "options": { "separator": ";" },
            "build": {
                "src": ["js/file1.js", "js/file2.js"],
                "dest": "js/app.js"
            }
        }
    });

    // Load required modules
    grunt.loadNpmTasks('grunt-contrib-concat');

    // Task definitions
    grunt.registerTask('default', ['concat']);
};

  6. Vous serez maintenant prêt à exécuter votre processus de construction en suivant la commande:

    grunt

J'espère que cela vous donnera une idée de la manière de travailler avec la version GruntJS.

REMARQUE:

Vous pouvez utiliser grunt-initpour créer Gruntfile.jssi vous voulez une création basée sur un assistant au lieu du codage brut pour l'étape 5.

Pour ce faire, procédez comme suit:

npm install -g grunt-init
git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile
grunt-init gruntfile

Pour les utilisateurs de Windows: si vous utilisez cmd.exe, vous devez passer ~/.grunt-init/gruntfileà %USERPROFILE%\.grunt-init\. PowerShell reconnaîtra ~correctement le.

Qorbani
la source
c'est ce que je cherchais, merci. également, est-il nécessaire que gruntfile.js soit placé dans le dossier racine du projet (impossible de le faire fonctionner autrement sur Windows)?
chester89
1
L'étape 5 pourrait-elle être configurée très simplement en utilisant grunt init:gruntfile? Je l' ai essayé de faire cela , mais je reçois toujours une erreur: Fatal error: Unable to find Gruntfile. La création de Gruntfile.js est-elle toujours un processus manuel? Si tel est le cas, je vois un avantage à utiliser Yeoman où un Gruntfile.js est généré automatiquement (et cela s'applique toujours aux projets que je
créerais
@micah, vous pouvez utiliser l'outil grunt-init pour créer facilement Gruntfile. Je vais mettre à jour le message principal et l'ajouter en note.
Qorbani
@qorbani Alors je suis confus. Dans un répertoire pour ce projet non-grunt, j'ai déjà suivi les étapes 1-4. Maintenant, je viens de courir npm install -g grunt-initet il s'est installé avec succès. J'ai suivi cela avec grunt init:gruntfileet cela me donne toujours la même erreur fatale. Qu'est-ce que je rate?
micah
grunt init: gruntfile n'est pas correct. grunt-init est une aide différente pour l'échafaudage basé sur des modèles et vous devez installer le modèle gruntfile pour pouvoir générer Gruntfile.js
Qorbani
8

Un certain temps, nous devons définir la variable PATH pour WINDOWS

% USERPROFILE% \ AppData \ Roaming \ npm

Après ce test avec where grunt

Remarque: n'oubliez pas de fermer la fenêtre d'invite de commande et de la rouvrir.

Partha Sarathi Ghosh
la source
5

J'ai eu le même problème, mais je l'ai résolu en changeant mon Grunt.js en Gruntfile.js Vérifiez le nom de votre fichier avant de taper grunt.cmd sur Windows cmd (si vous utilisez Windows).

Andromada
la source
2

Vous devriez installer grunt-cli dans les devDependencies du projet, puis l'exécuter via un script dans votre package.json. De cette façon, les autres développeurs qui travaillent sur le projet utiliseront tous la même version de grunt et n'auront pas à installer globalement dans le cadre de la configuration.

Installez grunt-cli avec npm i -D grunt-cliau lieu de l'installer globalement avec -g.

//package.json

...

"scripts": {
  "build": "grunt"
}

Puis utilisez npm run buildpour déclencher un grognement.

itwasmattgregg
la source