Cómo instalar Grunt en Ubuntu 16.04

Grunt es un ejecutor de tareas de JavaScript, que hace cosas que normalmente haces con tu código. Uno de los mejores ejemplos es que, cuando estás a punto de lanzar un sitio web, para hacer que tu sitio sea más rápido, intentas usar un CSS Minifier que minimiza todos tus archivos CSS y los hace más pequeños o más cortos. Normalmente, necesitamos copiar todos los códigos de archivos CSS a un sitio web de Minifier y agregar estos códigos modificados a los archivos de su dominio. Pero con Grunt, puedes hacerlo usando sus complementos. Cuando ejecutas Grunt, ejecutará todos los complementos que hayas configurado y hará automáticamente lo que quieras hacer con estos complementos. Uno de los complementos más geniales que posee Grunt es CSS Minifier. Puede minimizar sus archivos CSS o incluso archivos javascript, compilar Sass, ejecutar JSHint, etc. utilizando complementos de Grunt automáticamente.

En este tutorial, explicaré cómo configurar Grunt en nuestro servidor Ubuntu 16.04. Los complementos Grunt y Grunt se instalan y administran a través de npm, el administrador de paquetes de Node.js. En primer lugar, para empezar, necesitamos instalar NPM / NodeJS.

Instalación de NPM / NodeJS

En primer lugar, debemos agregar y habilitar un repositorio de Ubuntu para admitir la instalación de NPM / NodeJS y luego utilizar los siguientes comandos para instalarlos.

$apt-get install python-software-properties

$curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -

## Populating apt-get cache...

+ apt-get update
Get:1 http://security.ubuntu.com/ubuntu xenial-security InRelease [102 kB]
Hit:2 http://nyc2.mirrors.digitalocean.com/ubuntu xenial InRelease
Get:3 http://nyc2.mirrors.digitalocean.com/ubuntu xenial-updates InRelease [102 kB]
Get:4 http://nyc2.mirrors.digitalocean.com/ubuntu xenial-backports InRelease [102 kB]
Fetched 306 kB in 1s (274 kB/s)
Reading package lists... Done

## Confirming "xenial" is supported...

+ curl -sLf -o /dev/null 'https://deb.nodesource.com/node_6.x/dists/xenial/Release'

## Adding the NodeSource signing key to your keyring...

+ curl -s https://deb.nodesource.com/gpgkey/nodesource.gpg.key | apt-key add -
OK

## Creating apt sources list file for the NodeSource Node.js v6.x repo...

+ echo 'deb https://deb.nodesource.com/node_6.x xenial main' > /etc/apt/sources.list.d/nodesource.list
+ echo 'deb-src https://deb.nodesource.com/node_6.x xenial main' >> /etc/apt/sources.list.d/nodesource.list

## Running `apt-get update` for you...

+ apt-get update
Hit:1 http://mirrors.digitalocean.com/ubuntu xenial InRelease
Get:2 http://mirrors.digitalocean.com/ubuntu xenial-updates InRelease [102 kB]
Get:3 http://mirrors.digitalocean.com/ubuntu xenial-backports InRelease [102 kB]
Get:4 http://security.ubuntu.com/ubuntu xenial-security InRelease [102 kB]
Get:5 https://deb.nodesource.com/node_6.x xenial InRelease [3,914 B]
Get:6 https://deb.nodesource.com/node_6.x xenial/main Sources [764 B]
Get:7 https://deb.nodesource.com/node_6.x xenial/main amd64 Packages [962 B]
Fetched 312 kB in 0s (635 kB/s)
Reading package lists... Done

## Run `apt-get install nodejs` (as root) to install Node.js v6.x and npm

Al ejecutar el comando anterior, puede ver todos los procedimientos que tienen lugar. Agrega un nuevo repositorio y actualiza los paquetes. Ahora solo tenemos que ejecutar el comando de instalación para hacerlo como se indica.

$apt-get install nodejs

Confirmemos las instalaciones realizadas.

$ node --version
v6.9.4
$npm --version
3.10.10

Instalación de Grunt y Grunt-CLI

Antes de instalar Grunt, debemos asegurarnos de que nuestro paquete npm esté actualizado. Puede asegurarse de que ejecutando este comando:

$npm update -g npm

Después de actualizar nuestro paquete npm, puede ejecutar estos comandos para instalar Grunt y Grunt-CLI

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

Puede confirmar la instalación ejecutando este comando a continuación:

$grunt --version
grunt-cli v1.2.0

Una CLI de Grunt no instala el ejecutor de tareas de Grunt. Lo que Grunt CLI realmente hace es ejecutar la versión de Grunt que se ha instalado junto a un Gruntfile. Esto permite instalar múltiples versiones de Grunt en la misma máquina simultáneamente para diferentes proyectos.

Cómo funciona la CLI

Cada vez que se ejecuta grunt, busca un Grunt instalado localmente usando el nodo exigir() sistema. Esto facilita que gruñido se ejecute desde cualquier subcarpeta de su proyecto. Puedes pasar por su código para entender mejor.

Si se encuentra un Grunt instalado localmente, la CLI carga la instalación local de la biblioteca Grunt, aplica la configuración de su Gruntfile y ejecuta cualquier tarea que haya solicitado para que se ejecute.

Componentes de un proyecto Simple Grunt

Los dos archivos importantes que determinan la configuración de su proyecto son package.json y Gruntfile.js.

package.json: Npm utiliza este archivo para almacenar metadatos para proyectos publicados como módulos npm. Puede enumerar Grunt y los complementos / módulos de Grunt y sus dependencias de desarrollo en este archivo para su proyecto.

Gruntfile: Este archivo se llama Gruntfile.js y se usa para configurar o definir tareas y cargar complementos de Grunt.

Creé una carpeta llamada «~ / MyGrunt_project» en la que voy a configurar mi proyecto gruñido. En primer lugar, necesito crear mi archivo package.json dentro del directorio de mi proyecto. Para crear mi paquete.json, acabo de ejecutar el comando npm init desde mi directorio raíz. El comando npm init creará un archivo package.json básico.

:~/MyGrunt_project# npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (MyGrunt_project) myproject
version: (1.0.0)
description: Testing
entry point: (index.js)
test command:
git repository:
keywords: test
author: Linoxideadmin
license: (ISC)
About to write to /root/MyGrunt_project/package.json:

{
"name": "myproject",
"version": "1.0.0",
"description": "Testing",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [
"test"
],
"author": "Linoxideadmin",
"license": "ISC"
}
Is this ok? (yes) yes

A continuación, necesitamos instalar Grunt y sus módulos en nuestro directorio de proyectos. Puede hacerlo simplemente ejecutando este comando a continuación:

$npm install grunt --save-dev

Lo que hace este «–save-dev» es que guarda los módulos grunt y nuestras dependencias en su archivo package.json.

Modificó nuestro archivo package.json de la siguiente manera:

~/MyGrunt_project# cat package.json
{
"name": "myproject",
"version": "1.0.0",
"description": "Testing",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [
"test"
],
"author": "Linoxideadmin",
"license": "ISC",
"devDependencies": {
"grunt": "^1.0.1"
}
}

Ahora hemos instalado grunt dentro de nuestro proyecto. Tendremos una carpeta llamada node_modules con todos esos módulos Grunt requeridos.

$~/MyGrunt_project# ll
total 16
drwxr-xr-x 3 root root 4096 Jan 29 07:26 ./
drwx------ 6 root root 4096 Jan 29 07:03 ../
drwxr-xr-x 91 root root 4096 Jan 29 07:26 node_modules/
-rw-r--r-- 1 root root 307 Jan 29 07:26 package.json

Creando tu Gruntfile

A continuación, necesitamos crear su Gruntfile. Gruntfile es donde registra y carga todos sus módulos y complementos. Es un archivo JavaScript válido. Y es desde donde puede ejecutar todos sus complementos cargados con solo escribir el comando gruñido en su línea de comando dentro de su proyecto.

Un Gruntfile se compone de las siguientes partes:

The "wrapper" function
Project and task configuration
Section for loading Grunt plugins and tasks
Custom tasks

Creé mi simple gruntfile. Véalo a continuación:

$~# cat MyGrunt_project/gruntfile.js
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
});
};

Instalación y uso de complementos

Los complementos nos hacen la vida más fácil al realizar nuestras tareas requeridas de manera eficiente en poco tiempo. Puede obtener todos los complementos de Grunt disponibles y útiles aquí. Puede seleccionar el complemento requerido de la lista e instalarlo según las instrucciones allí. La forma más fácil de agregar complementos Grunt y grunt a un package.json existente es con el comando npm install –save-dev.

Voy a instalar / usar el complemento contrib-uglify para usted hoy, esto ayuda a minimizar sus archivos javascript automáticamente usando grunt. Puede instalar su complemento ejecutando este comando en el directorio de su proyecto:

$/MyGrunt_project# npm install grunt-contrib-uglify --save-dev
myproject@1.0.0 /root/MyGrunt_project
└─┬ grunt-contrib-uglify@2.0.0
├── lodash.assign@4.2.0
├─┬ maxmin@1.1.0
│ ├── figures@1.7.0
│ ├─┬ gzip-size@1.0.0
│ │ ├─┬ browserify-zlib@0.1.4
│ │ │ └── pako@0.2.9
│ │ └─┬ concat-stream@1.6.0
│ │ ├─┬ readable-stream@2.2.2
│ │ │ ├── buffer-shims@1.0.0
│ │ │ ├── core-util-is@1.0.2
│ │ │ ├── isarray@1.0.0
│ │ │ ├── process-nextick-args@1.0.7
│ │ │ ├── string_decoder@0.10.31
│ │ │ └── util-deprecate@1.0.2
│ │ └── typedarray@0.0.6
│ └── pretty-bytes@1.0.4
├─┬ uglify-js@2.7.5
│ ├── async@0.2.10
│ ├── source-map@0.5.6
│ ├── uglify-to-browserify@1.0.2
│ └─┬ yargs@3.10.0
│ ├── camelcase@1.2.1
│ ├─┬ cliui@2.1.0
│ │ ├─┬ center-align@0.1.3
│ │ │ ├─┬ align-text@0.1.4
│ │ │ │ ├─┬ kind-of@3.1.0
│ │ │ │ │ └── is-buffer@1.1.4
│ │ │ │ ├── longest@1.0.1
│ │ │ │ └── repeat-string@1.6.1
│ │ │ └── lazy-cache@1.0.4
│ │ ├── right-align@0.1.3
│ │ └── wordwrap@0.0.2
│ └── window-size@0.1.0
└── uri-path@1.0.0

npm WARN myproject@1.0.0 No repository field.

Esto instalará su complemento y lo agregará a su archivo package.json.

Como puede ver, nuestro módulo se agrega a nuestro archivo package.json. Una vez que se ha instalado el complemento, se puede habilitar dentro de su Gruntfile con esta línea de JavaScript:

Echa un vistazo a mi gruntfile.js adjunto a este módulo.





La parte comentada describe los cuatro componentes de nuestro Gruntfile como se discutió anteriormente.

1) La función de envoltura

2) Configuración de proyecto o tarea

3) Cargar el módulo Grunt o los complementos

4) Tareas personalizadas que define cuántas tareas ejecutar.





Ahora he descargado mi archivo java de origen en el directorio de mi proyecto, que necesitamos minificar.
$ wget http://code.jquery.com/jquery-2.1.1.js
Finalmente, ejecutemos grunt en nuestra línea de comandos en el directorio de nuestro proyecto para iniciar nuestra tarea de minificar nuestro archivo Javascript según sea necesario.
$ / MyGrunt_project # gruñido Ejecutando la tarea «uglify: build» (uglify) >> 1 archivo creado.Hecho.




Puede notar que nuestra tarea se ejecutó correctamente y creó un archivo minimizado como se describe en nuestro archivo grunt.
$ MyGrunt_project # ls -l jquery * -rw-r – r– 1 raíz raíz 247351 24 de octubre de 2014 jquery-2.1.1.js -rw-r – r– 1 raíz raíz 84034 29 de enero 09:06 jquery-2.1.1.min.js
Ahí vamos, tiene su archivo javascript minificado jquery-2.1.1.min.js creado automáticamente en muy poco tiempo :).
Conclusión
Grunt ha hecho que el desarrollo web sea más agradable y fácil.  Automatiza las tareas repetitivas.  Además, ha permitido a los desarrolladores web centrarse en crear funciones en lugar de copiar, compilar y configurar.  Grunt tiene una gran comunidad con muchos complementos para automatizar nuestro proceso de desarrollo web.  Es importante saber que Grunt tiene muchas opciones para obtener un buen flujo de trabajo.  Recomiendo investigar más opciones y, por supuesto, probarlo y dejarme saber sus comentarios.