Requisitos:

• Tener instalado Node.js
• Tener instalado grunt de forma global y en el proyecto que estamos haciendo.

 

Instalar Node.js :

• Enlace donde descargar Node.js

Enlace a Node.js

 

 

Instalar grunt de forma global :

• Escribimos en la consola

npm install -g grunt-cli

 

Instalar grunt en un proyecto

• En la carpeta raiz de nuestro proyecto crearemos un archivo llamado package.json con la instrucción:

npm init

Rellenaremos los datos que nos piden sobre nuestro proyecto y al finalizar tendremos creado ya el archivo.

    Si estamos trabajando ya con bower ya estará creado. Si no sabes cómo usar bower y dependencias  Bower

• Instalamos grunt:

npm install grunt --save -dev

• En nuestro archivo package.json ya se habrá creado la dependencia de nuestro proyecto hacia grunt.

En la carpeta raiz  se habrá creado un achivo llamado Gruntfile.js .

• Este archivo es el encargado de la carga de los plugins, además de incluir la configuración de cada una de las tareas.
• Se compone de las siguientes partes:

• La función contenedora.
• Configuración de proyectos y tareas.
• Carga de plugins.
• Registro de tareas.

1. La función contenedora.

• Esta función es la que contendrá todo nuestro código de Grunt.js.

module.exports = function(grunt) {
    // Configuración de Grunt.js
};

 

2. Configuración de proyectos y tareas.

• Aquí encontramos el método grunt.initConfig, este método inicializa un objeto de configuración para el proyecto actual.
• El objeto se utiliza para las tareas y se puede acceder a él mediante el método grunt.config, dicho objeto es un objeto Javascript que nosotros ingresaremos.
• Por lo general este objeto lo iremos alimentando con todas las configuraciones de tareas que deseemos poner en nuestro proyecto.

grunt.initConfig({
        // Configuración para proyectos y tareas.
    });

3. Carga de plugins.

• Para la carga de plugins de Grunt.js, usaremos el método loadNpmTasks, con el siguiente código cargaremos el plugin “grunt-contrib-uglify”.

// Cargar la tarea grunt-contrib-uglify
grunt.loadNpmTasks('grunt-contrib-uglify');

4. Registro de tareas.

• Para el registro de tareas usaremos el método registerTask de Grunt.js.

// Tarea por defecto.
grunt.registerTask('default', ['uglify']);

 

Este método tiene 2 parámetros:

1. El nombre que queremos ponerle a la tarea y con este mismo nombre podremos acceder a ejecutar la tarea por ejemplo:

grunt default

2. El segundo parámetro es un Array de nombres de tareas, donde podemos  agregar una o más tareas, como podemos ver en el siguiente ejemplo.

grunt.registerTask('default', ['js', 'uglify']);

En este ejemplo vemos que se registró la tarea llamada default y dentro de esta tarea se ejecutarán en el orden indicado las siguientes tareas: js y uglify.

Ejemplo 1: Para minificar archivos js, usaremos el plugin  grunt-contrib-uglify.

1.Instalar el plugin desde consola.

npm install grunt-contrib-uglify --save-dev

se actualizará el archivo package.json con la nueva dependencia.

 

Ejemplo 1: Para minificar archivos js, usaremos el plugin  grunt-contrib-uglify.

 

2.Cargar la tarea en el archivo Gruntfile.js.

Abrimos el archivo Gruntfile.js y añadimos:

grunt.loadNpmTasks('grunt-contrib-uglify');

Ejemplo 1: Para minificar archivos js, usaremos el plugin  grunt-contrib-uglify .

 

3.Configurar la tarea también desde Gruntfile.js

Este paso será personalizado para cada tarea y lo ideal es consultar la documentación de cada plugin que suele estar incluida en GitHub. Aquí podrá encontrar la documentación

 

Ejemplo 1: Para minificar archivos js, usaremos el plugin  grunt-contrib-uglify .

 

3.Configurar la tarea también desde Gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({
    uglify: {
      my_target: {
        files: {
        '_/js/scripts.min.js': ['_/components/js/vendor/*.js','_/components/js/scripts.js']
        }
      } //my_target
    } //uglify
  });
  grunt.loadNpmTasks('grunt-contrib-uglify');
};

Ejemplo 1: Para minificar archivos js, usaremos el plugin  grunt-contrib-uglify .

 

3.Configurar la tarea también desde Gruntfile.js

Escribimos por consola en la carpeta donde está gruntfile.js

grunt uglify:my_target

Se habrá creado un archivo nuevo dentro de la carpeta /_/js/ llamado scripts_min.js.

 

Ejemplo 1: Para minificar archivos js, usaremos el plugin  grunt-contrib-uglify .

 

3.Configurar la tarea también desde Gruntfile.js

Otra forma de codificar este plugin podría ser (Como vemos es muy importante leer la documentación del plugin)

module.exports = function (grunt) {
  grunt.initConfig({
    uglify: {
      options: {
        mangle: false,compress: {
          drop_console: true
        }
      },
      js: {
        files: [{
          cwd: 'js/src/',expand: true,src: '*.js',dest: 'js/min/'
        }]
      }
    }
 });
 grunt.loadNpmTasks('grunt-contrib-uglify');
 grunt.registerTask('default', ['uglify']);
};

Con esto solo tenemos que ingresar por medio del terminal a nuestra carpeta donde esta alojado el Gruntfile.js y ejecutar la tarea registrada.

grunt default

Al ejecutar la tarea, Grunt.js minificará los archivos *.js que se encuentren en la carpeta js/src/ y pondrá el resultado en la carpeta js/min/.