Cómo instalar grunt y cómo crear un script con él


86

Hola, estoy intentando instalar Grunt en Windows 7 de 64 bits. He instalado Grunt usando comandos

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

pero ahora si intento hacerlo grunt init, me está lanzando un error -

No se pudo encontrar un Gruntfile válido. Consulte la guía de introducción para obtener más información sobre cómo configurar grunt: http://gruntjs.com/getting-started Error fatal: No se puede encontrar Gruntfile.

Pero cuando miro dentro de la carpeta grunt en mi sistema, Gruntfile.jsestá ahí. ¿Alguien puede guiarme sobre cómo instalar correctamente este gruñido y cómo escribir un script integrado usando el gruñido? Tengo una página HTML y un script Java. Si quiero crear un script con Grunt, ¿cómo puedo hacerlo?


1
npm install -g gruntsignifica instalar Grunt globalmente, lo que ya no se recomienda (comenzando con Grunt 0.4).
Ludder

Respuestas:


229

Para configurar la compilación de GruntJS, aquí están los pasos:

  1. Asegúrese de haber configurado package.jsono configurado uno nuevo:

    npm init
    
  2. Instale Grunt CLI como global:

    npm install -g grunt-cli
    
  3. Instale Grunt en su proyecto local:

    npm install grunt --save-dev
    
  4. Instale cualquier módulo Grunt que pueda necesitar en su proceso de construcción. Solo por el bien de esta muestra, agregaré el módulo Concat para combinar archivos:

    npm install grunt-contrib-concat --save-dev
    
  5. Ahora necesita configurar su Gruntfile.jsque describirá su proceso de construcción. Para esta muestra, simplemente combino dos archivos JS file1.jsy file2.jsen la jscarpeta y genero 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. Ahora estará listo para ejecutar su proceso de compilación siguiendo el comando:

    grunt
    

Espero que esto le dé una idea de cómo trabajar con GruntJS build.

NOTA:

Puede usar grunt-initpara crear Gruntfile.jssi desea una creación basada en asistente en lugar de codificación sin formato para el paso 5.

Para hacerlo, siga estos pasos:

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

Para usuarios de Windows: si está utilizando cmd.exe, debe cambiar ~/.grunt-init/gruntfilea %USERPROFILE%\.grunt-init\. PowerShell reconocerá ~correctamente.


eso es lo que he estado buscando, gracias. Además, ¿es necesario que gruntfile.js se coloque en la carpeta raíz del proyecto (no se puede hacer que funcione de otra manera en Windows)?
chester89

1
¿Se podría configurar el paso 5 de forma muy básica grunt init:gruntfile? He intentado hacer esto, pero siempre me sale un error: Fatal error: Unable to find Gruntfile. ¿La creación de Gruntfile.js es siempre un proceso manual? Si es así, veo una ventaja de utilizar Yeoman, donde se genera automáticamente un Gruntfile.js (y esto todavía se aplica a los proyectos que crearían que no son en realidad los webapps.
Miqueas

@micah, puede usar la herramienta grunt-init para crear Gruntfile fácilmente. Actualizaré la publicación principal y la agregaré como una nota.
Qorbani

@qorbani Entonces estoy confundido. En un directorio para este proyecto no gruñón, ya he seguido los pasos 1-4. Ahora acabo de ejecutar npm install -g grunt-inity se instaló correctamente. Seguí esto con grunt init:gruntfiley todavía me da el mismo error fatal. ¿Qué me estoy perdiendo?
miqueas

grunt init: gruntfile no es correcto. grunt-init es un ayudante diferente para el andamio basado en plantillas y necesita instalar la plantilla gruntfile para poder generar Gruntfile.js
Qorbani

8

En algún momento necesitamos establecer la variable PATH para WINDOWS

% PERFIL DE USUARIO% \ AppData \ Roaming \ npm

Después de esa prueba con where grunt

Nota: No olvide cerrar la ventana del símbolo del sistema y volver a abrirla.


5

Tengo el mismo problema, pero lo resolví cambiando mi Grunt.js a Gruntfile.js Verifique el nombre de su archivo antes de escribir grunt.cmd en Windows cmd (si está usando Windows).


2

Debería instalar grunt-cli en devDependencies del proyecto y luego ejecutarlo mediante un script en su package.json. De esta manera, otros desarrolladores que trabajen en el proyecto usarán la misma versión de grunt y no tendrán que instalarlo globalmente como parte de la configuración.

Instale grunt-cli con en npm i -D grunt-clilugar de instalarlo globalmente con -g.

//package.json

...

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

Luego usa npm run buildpara disparar gruñido.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.