Grunt es un ejecutor de tareas de JavaScript que nos ayuda a automatizar tareas mundanas y repetitivas como minificación, compilación, pruebas unitarias, linting, etc. Grunt tiene cientos de complementos para elegir, puede usar Grunt para automatizar casi cualquier cosa con un mínimo de esfuerzo .
El objetivo de este artículo es comenzar con Grunt y aprender cómo minificar automáticamente nuestros archivos JavaScript y validarlos usando JSHint.
Instalación de Grunt-CLI: primero, debe instalar la interfaz de línea de comandos (CLI) de Grunt globalmente para que podamos usarla desde cualquier lugar.
$ npm install -g grunt-cli
Creación de un nuevo proyecto de Grunt: deberá crear un nuevo proyecto o puede usar un proyecto existente. Llamémoslo grunt_app .
Ahora deberá agregar dos archivos a su proyecto: package.json y Gruntfile.
package.json: almacena las diversas dependencias de desarrollo y dependencias para su proyecto, así como algunos metadatos. Enumerará grunt y los complementos de Grunt que su proyecto necesita como devDependencies en este archivo.
Gruntfile: Este es un archivo de configuración para grunt. Puede nombrarse como Gruntfile.jso Gruntfile.coffee.
Ejecute los siguientes comandos desde el directorio raíz de su proyecto:
// Generate a package.json file $ npm init // Install grunt and add in package.json $ npm install grunt --save-dev
Ahora cree un archivo en su directorio llamado Gruntfile.jsy copie lo siguiente en él.
module.exports = function(grunt) {
// Do grunt-related things in here
};
Esta es la función de «envoltura» y todo el código de Grunt debe especificarse dentro de ella. Incluye la configuración del proyecto y la configuración de tareas.
Ahora crea dos archivos más: index.htmlymain.js
índice.html
<html> <body> <h1>Hello World</h1> <script src="main.min.js"></script> </body> </html>
principal.js
function greet() {
alert("Hello GeeksForGeeks");
}
Usaremos un grunt-contrib-uglifycomplemento para minimizar los archivos JavaScript con UglifyJS.
Instale grunt-contrib-uglify:
$ npm install grunt-contrib-uglify --save-dev
Actualice su Gruntfile de la siguiente manera:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
build: {
src: 'main.js',
dest: 'main.min.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
};
Ahora puede ejecutar $grunt uglifypara minimizar su archivo. También puede establecer tareas predeterminadas para grunt que se ejecutan cada vez que $gruntse ejecuta.
Para validar nuestros archivos JavaScript usaremos grunt-contrib-jshint . Instale el complemento usando $npm install grunt-contrib-jshint --save-devPuede usar esto ejecutando$grunt jshint
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
build: {
src: 'main.js',
dest: 'main.min.js'
}
},
jshint: {
options: {
curly: true,
eqeqeq: true,
eqnull: true,
browser: true,
globals: {
jQuery: true
},
},
uses_defaults: ['*.js']
},
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
// Default task(s).
grunt.registerTask('default', ['uglify']);
};
