Ponte en marcha con Grunt

1. Empezando con gruñido
   1. ¿Qué es el gruñido?
   2. ¿Por qué utilizar Grunt?
2. Configuración
   1. Creando el archivo package.json
   2. Creando el archivo gruntfile.js
   3. Extendiendo el archivo package.json
3. Cargando tareas npm en Grunt
4. Validar con HTMLHint
5. Automatice las tareas que se ejecutan cada vez que se guarda un archivo
6. Mantener JavaScript lo más optimizado posible
7. Construyendo CSS a partir de archivos fuente Sass
8. Validar con HTMLHint
9. Automatice las tareas que se ejecutan cada vez que se guarda un archivo
10. Mantener JavaScript lo más optimizado posible
11. Construyendo CSS a partir de archivos fuente Sass

Hoy, Mike Cunsolo nos mostrará cómo usar Grunt en un proyecto para acelerar y cambiar la forma de desarrollar sitios web, analizando brevemente lo que Grunt puede hacer, antes de pasar a cómo configurar y usar sus diversos complementos. Luego explicará cómo construir un validador de entrada simple, usando Sass como preprocesador, cómo usar grunt-cssc y CssMin para combinar y minimizar nuestro CSS, cómo construir nuestros activos comprimidos sobre la marcha, ¡y mucho más!

En este artículo, exploraremos cómo usar Grunt en un proyecto para acelerar y cambiar la forma en que desarrolla sitios web. Veremos brevemente lo que Grunt puede hacer, antes de pasar a cómo configurar y usar sus diversos complementos para hacer todo el trabajo pesado de un proyecto.

Luego veremos cómo construir un validador de entrada simple, usando Sass como preprocesador, cómo usar grunt-cssc y CssMin para combinar y minimizar nuestro CSS, cómo usar HTMLHint para asegurarnos de que nuestro HTML esté escrito correctamente y cómo para construir nuestros activos comprimidos sobre la marcha. Por último, veremos el uso de UglifyJS para reducir el tamaño de nuestro JavaScript y garantizar que nuestro sitio web utilice el menor ancho de banda posible.

Grunt.js es un ejecutor de tareas de JavaScript que le ayuda a realizar tareas repetitivas como minificación, compilación, pruebas unitarias o linting.

Empezando con gruñido

La mayoría de los desarrolladores estarían de acuerdo en que la velocidad y el ritmo del desarrollo de JavaScript en los últimos años han sido bastante sorprendentes. Ya sea con frameworks como Backbone.js y Ember.js o con comunidades como JS Bin , el desarrollo de este lenguaje está cambiando no solo la forma en que experimentamos los sitios web como usuarios sino también la forma en que los construimos.

Cuando trabaja con JavaScript, es probable que necesite ejecutar varias tareas con regularidad. Si bien esto es prácticamente un hecho en la mayoría de los proyectos, es una forma de trabajar repetitiva y que requiere mucho tiempo. Al estar en una comunidad tan activa, se podría suponer que hay herramientas disponibles para automatizar y acelerar este proceso. Aquí es donde entra Grunt.

¿Qué es el gruñido?

Construido sobre Node.js, Grunt es una herramienta de línea de comandos basada en tareas que acelera los flujos de trabajo al reducir el esfuerzo necesario para preparar los activos para la producción. Para ello, agrupa los trabajos en tareas que se compilan automáticamente a medida que avanza. Básicamente, puedes usar Grunt en la mayoría de las tareas que consideras trabajo pesado y que normalmente tendrías que configurar y ejecutar manualmente.

Si bien las versiones anteriores incluían complementos como JSHint y Uglyify, la versión más reciente (versión 0.4) se basa en complementos para todo.

¿Qué tipo de tareas? Bueno, la lista es exhaustiva. Basta decir que Grunt puede manejar la mayoría de las cosas que le pongas, desde minimizar hasta concatenar JavaScript. También se puede utilizar para una variedad de tareas no relacionadas con JavaScript, como compilar CSS de LESS y Sass. Incluso lo hemos usado con flash(1) para notificarnos cuando falla una compilación.

¿Por qué utilizar Grunt?

Una de las mejores cosas es la coherencia que aporta a los equipos. Si trabaja en colaboración, sabrá lo frustrante que puede ser la inconsistencia en el código. Grunt permite a los equipos trabajar con un conjunto unificado de comandos, garantizando así que todos los miembros del equipo escriban código con el mismo estándar. Después de todo, nada es más frustrante que una compilación que falla debido a pequeñas inconsistencias en la forma en que un equipo de desarrolladores escribe el código.

Grunt también tiene una comunidad de desarrolladores increíblemente activa, y periódicamente se lanzan nuevos complementos. La barrera de entrada es relativamente baja porque ya se puede utilizar una amplia gama de herramientas y tareas automatizadas.

Configuración

Lo primero que debe hacer para utilizar Grunt es configurar Node.js. (Si no sabe nada acerca de Node.js, no se preocupe: simplemente debe instalarlo para que Grunt pueda ejecutarse).

Una vez que Node.js esté instalado, ejecute este comando:

$ npm install -g grunt-cli

Para asegurarse de que Grunt se haya instalado correctamente, puede ejecutar el siguiente comando:

$ grunt --version

El siguiente paso es crear un archivo package.jsony gruntfile.jsen el directorio raíz de su proyecto.

Creando el archivo package.json

El archivo JSON nos permite rastrear e instalar todas nuestras dependencias de desarrollo. Entonces, cualquiera que trabaje en el proyecto tendrá las dependencias más actualizadas, lo que en última instancia ayuda a mantener sincronizados los entornos de desarrollo.

Cree un archivo en la raíz de su proyecto que contenga lo siguiente:

{ "name" : "SampleGrunt", "version" : "0.1.0", "author" : "Brandon Random", "private" : true, "devDependencies" : { "grunt" : "~0.4.0" }}

Una vez que haya hecho esto, ejecute el siguiente comando:

$ npm install

Esto le dice a npm qué dependencias instalar y las coloca en una node_modulescarpeta.

Creando el archivo gruntfile.js

Gruntfile.jsse compone esencialmente de una función contenedora que toma gruntcomo argumento.

module.exports = function(grunt){ grunt.initConfig({ pkg: grunt.file.readJSON('package.json') }); grunt.registerTask('default', []);};

Ahora estás configurado para ejecutar Grunt desde la línea de comando en la raíz de tu proyecto. Pero si lo hace en esta etapa, recibirá la siguiente advertencia:

$ grunt

No se encontró la tarea "predeterminada". Utilice –force para continuar.

Obtendríamos esto porque aún no hemos especificado ninguna tarea o dependencia aparte de Grunt. Entonces, hagamos eso. Pero primero, veamos cómo extender el package.jsonarchivo.

Extendiendo el archivo package.json

Lo mejor de trabajar con Node.js es que puede buscar paquetes e instalarlos de una sola vez, simplemente basándose en el contenido del archivo del paquete. Para instalar todas las nuevas dependencias, simplemente agregue esto al archivo:

{ "name" : "SampleGrunt", "version" : "0.1.0", "author" : "Mike Cunsolo", "private" : true, "devDependencies" : { "grunt" : "~0.4.0", "grunt-contrib-cssmin": "*", "grunt-contrib-sass": "*", "grunt-contrib-uglify": "*", "grunt-contrib-watch": "*", "grunt-cssc": "*", "grunt-htmlhint": "*", "matchdep": "*" }}

¿Y para completar el proceso? Lo adivinaste:

$ npm install

Cargando tareas npm en Grunt

Ahora que los paquetes han sido instalados, deben cargarse en Grunt antes de que podamos hacer algo con ellos. Podemos cargar todas las tareas automáticamente con una sola línea de código, usando la matchdepdependencia. Esto es una gran ayuda para el desarrollo porque ahora la lista de dependencias se incluirá solo en el archivo del paquete.

En la parte superior de gruntfile.js, arriba grunt.initConfig, pega esto:

require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);

Sin matchdep, tendríamos que escribir grunt.loadNpmTasks(“grunt-task-name”);para cada dependencia, lo que se acumularía rápidamente a medida que encontráramos e instalamos otros complementos.

Debido a que los complementos están cargados en Grunt, podemos comenzar a especificar opciones. En primer lugar está el archivo HTML ( index.html), que contiene lo siguiente:

!DOCTYPE htmlhtml head meta charset="utf-8" meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" titleEnter your first name/title link rel="stylesheet" href="build/css/master.css" /head body label for="firstname"Enter your first name/label input name="firstname" type="text" p/p script type="text/javascript" src="build/js/base.min.js"/script /body/html

Validar con HTMLHint

Agregue esta configuración a grunt.initConfig:

htmlhint: { build: { options: { 'tag-pair': true, 'tagname-lowercase': true, 'attr-lowercase': true, 'attr-value-double-quotes': true, 'doctype-first': true, 'spec-char-escape': true, 'id-unique': true, 'head-script-disabled': true, 'style-disabled': true }, src: ['index.html'] }}

Un complemento generalmente se configura así: el nombre del complemento (sin el grunt-contrib-/grunt-prefijo), luego uno o más objetivos de su elección (que pueden usarse para crear opciones personalizadas para el complemento para diferentes archivos), un optionsobjeto y los archivos a los que afecta. . Ahora, cuando ejecutemos grunt htmlhintdesde la terminal, revisará el archivo fuente y se asegurará de que nuestro HTML no tenga errores. Sin embargo, escribir este comando manualmente varias veces por hora resultaría tedioso con bastante rapidez.

Automatice las tareas que se ejecutan cada vez que se guarda un archivo

La watchtarea puede ejecutar un conjunto único de tareas según el archivo que se guarda, utilizando objetivos. Agregue esta configuración a grunt.initConfig:

watch: { html: { files: ['index.html'], tasks: ['htmlhint'] }}

Luego, ejecute grunt watchen la terminal. Ahora, intenta agregar un comentario a index.html. ¡Notarás que cuando se guarda el archivo, la validación es automática! Esto es una gran ayuda para el desarrollo porque significa que watchse validará silenciosamente a medida que escriba el código y fallará si el código no ha pasado las pruebas pertinentes (y le dirá cuál es el problema).

Tenga en cuenta que grunt watchseguirá ejecutándose hasta que se cierre el terminal o hasta que se detenga ( Control + Cen una Mac).

Mantener JavaScript lo más optimizado posible

Configuremos un archivo JavaScript para validar el nombre de un usuario. Para que esto sea lo más sencillo posible, comprobaremos únicamente los caracteres no alfabéticos. También usaremos el strictmodo JavaScript, que nos impide escribir JavaScript válido pero de mala calidad. Pegue lo siguiente en assets/js/base.js:

function Validator(){ "use strict";}Validator.prototype.checkName = function(name){ "use strict"; return (/[^a-z]/i.test(name) === false);};window.addEventListener('load', function(){ "use strict"; document.getElementById('firstname').addEventListener('blur', function(){ var _this = this; var validator = new Validator(); var validation = document.getElementById('namevalidation'); if (validator.checkName(_this.value) === true) { validation.innerHTML = 'Looks good! :)'; validation.className = "validation yep"; _this.className = "yep"; } else { validation.innerHTML = 'Looks bad! :('; validation.className = "validation nope"; _this.className = "nope"; } });});

Usemos UglifyJS para minimizar este archivo fuente. Añade esto a grunt.initConfig:

uglify: { build: { files: { 'build/js/base.min.js': ['assets/js/base.js'] } }}

UglifyJS comprime todos los nombres de variables y funciones en nuestro archivo fuente para ocupar el menor espacio posible y luego recorta los espacios en blanco y los comentarios, lo cual es extremadamente útil para la producción de JavaScript. Nuevamente, tenemos que configurar una watchtarea para construir nuestro JavaScript Uglify. Agregue esto a la watchconfiguración:

watch: { js: { files: ['assets/js/base.js'], tasks: ['uglify'] }}

Construyendo CSS a partir de archivos fuente Sass

Sass es increíblemente útil para trabajar con CSS, especialmente en equipo. Generalmente se escribe menos código en el archivo fuente porque Sass puede generar grandes bloques de código CSS con cosas como funciones y variables. Caminar por Sass está un poco más allá del alcance de este artículo; Por lo tanto, si no se siente cómodo aprendiendo a utilizar un preprocesador en esta etapa, puede omitir esta sección. Pero cubriremos un caso de uso muy simple, usando variables, un mixin y la sintaxis Sassy CSS (SCSS), que es muy similar a CSS. Lavandes - Mejores productos de belleza

El complemento Sass de Grunt requiere la gema Sass. Necesitará instalar Ruby en su sistema (viene precargado en OS X). Puede comprobar si Ruby está instalado con este comando de terminal:

ruby -v

Instale Sass ejecutando lo siguiente:

gem install sass

Dependiendo de su configuración, es posible que necesite ejecutar este comando a través de sudo, es decir, sudo gem install sass:momento en el que se le pedirá su contraseña. Cuando Sass esté instalado, cree un nuevo directorio llamado assetsy, dentro de él, otro llamado sass. Cree un nuevo archivo con el nombre master.scssde este directorio y pegue lo siguiente en él:

@mixin prefix($property, $value, $prefixes: webkit moz ms o spec) { @each $p in $prefixes { @if $p == spec { #{$property}: $value; } @else { -#{$p}-#{$property}: $value; } }}$input_field: #999;$input_focus: #559ab9;$validation_passed: #8aba56;$validation_failed: #ba5656;$bg_colour: #f4f4f4;$box_colour: #fff;$border_style: 1px solid;$border_radius: 4px;html { background: $bg_colour;}body { width: 720px; padding: 40px; margin: 80px auto; background: $box_colour; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); border-radius: $border_radius; font-family: sans-serif;}input[type="text"] { @include prefix(appearance, none, webkit moz); @include prefix(transition, border .3s ease); border-radius: $border_radius; border: $border_style $input_field; width: 220px;}input[type="text"]:focus { border-color: $input_focus; outline: 0;}label,input[type="text"],.validation { line-height: 1; font-size: 1em; padding: 10px; display: inline; margin-right: 20px;}input.yep { border-color: $validation_passed;}input.nope { border-color: $validation_failed;}p.yep { color: $validation_passed;}p.nope { color: $validation_failed;}

Notarás que la extensión SCSS se parece mucho más a CSS que a Sass convencional. Esta hoja de estilo utiliza dos características de Sass: mixins y variables. Un mixin construye un bloque de CSS basado en algunos parámetros que se le pasan, de forma muy similar a como lo haría una función, y las variables permiten que fragmentos comunes de CSS se definan una vez y luego se reutilicen.

Las variables son especialmente útiles para colores hexadecimales; Podemos crear una paleta que se puede cambiar en un solo lugar, lo que hace que modificar aspectos de un diseño sea muy rápido. El mixin se utiliza para anteponer reglas como las de apariencia y transiciones, y reduce el volumen del archivo en sí.

Cuando se trabaja con una hoja de estilo grande, cualquier cosa que se pueda hacer para reducir la cantidad de líneas hará que el archivo sea más fácil de leer cuando un miembro del equipo que no sea usted quiera actualizar un estilo.

Además de Sass, grunt-cssc combina reglas CSS, asegurando que el CSS generado tenga una repetición mínima. Esto puede resultar muy útil en proyectos de mediana y gran escala en los que se repiten muchos estilos. Sin embargo, el archivo generado no siempre es el más pequeño posible. Aquí es donde cssminentra en juego la tarea. No sólo recorta el espacio en blanco, sino que transforma los colores a sus valores más cortos posibles (así whitesería #fff). Agregue estas tareas a gruntfile.js:

cssc: { build: { options: { consolidateViaDeclarations: true, consolidateViaSelectors: true, consolidateMediaQueries: true }, files: { 'build/css/master.css': 'build/css/master.css' } }},cssmin: { build: { src: 'build/css/master.css', dest: 'build/css/master.css' }},sass: { build: { files: { 'build/css/master.css': 'assets/sass/master.scss' } }}

Ahora que tenemos algo implementado para manejar hojas de estilo, estas tareas también deberían ejecutarse automáticamente. buildGrunt crea automáticamente el directorio para albergar todos los scripts de producción, CSS y (si se tratara de un sitio web completo) las imágenes comprimidas. Esto significa que el contenido del assetsdirectorio puede estar muy comentado y puede contener más archivos de documentación para fines de desarrollo; luego, el builddirectorio eliminaría todo eso, dejando los activos lo más optimizados posible.

Vamos a definir un nuevo conjunto de tareas para trabajar con CSS. Agregue esta línea a gruntfile.js, debajo del valor predeterminado task:

grunt.registerTask('buildcss', ['sass', 'cssc', 'cssmin']);

Ahora, cuando grunt buildcssse ejecute, todas las tareas relacionadas con CSS se ejecutarán una tras otra. Esto es mucho más ordenado que ejecutar grunt sass, entonces grunt cssc, entonces grunt cssmin. Todo lo que tenemos que hacer ahora es actualizar la watchconfiguración para que se ejecute automáticamente.

watch: { css: { files: ['assets/sass/**/*.scss'], tasks: ['buildcss'] }}

Este camino puede parecerle un poco extraño. Básicamente, busca archivos de forma recursiva en cualquier directorio de nuestro assets/sassdirectorio .scss, lo que nos permite crear tantos archivos fuente Sass como queramos, sin tener que agregar las rutas a gruntfile.js. Después de agregar esto, gruntfile.jsdebería verse así:

module.exports = function(grunt){ "use strict"; require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks); grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), cssc: { build: { options: { consolidateViaDeclarations: true, consolidateViaSelectors: true, consolidateMediaQueries: true }, files: { 'build/css/master.css': 'build/css/master.css' } } }, cssmin: { build: { src: 'build/css/master.css', dest: 'build/css/master.css' } },

Validar con HTMLHint

Agregue esta configuración a grunt.initConfig:

htmlhint: { build: { options: { 'tag-pair': true, 'tagname-lowercase': true, 'attr-lowercase': true, 'attr-value-double-quotes': true, 'doctype-first': true, 'spec-char-escape': true, 'id-unique': true, 'head-script-disabled': true, 'style-disabled': true }, src: ['index.html'] }}

Un complemento generalmente se configura así: el nombre del complemento (sin el grunt-contrib-/grunt-prefijo), luego uno o más objetivos de su elección (que pueden usarse para crear opciones personalizadas para el complemento para diferentes archivos), un optionsobjeto y los archivos a los que afecta. . Ahora, cuando ejecutemos grunt htmlhintdesde la terminal, revisará el archivo fuente y se asegurará de que nuestro HTML no tenga errores. Sin embargo, escribir este comando manualmente varias veces por hora resultaría tedioso con bastante rapidez.

Automatice las tareas que se ejecutan cada vez que se guarda un archivo

La watchtarea puede ejecutar un conjunto único de tareas según el archivo que se guarda, utilizando objetivos. Agregue esta configuración a grunt.initConfig:

watch: { html: { files: ['index.html'], tasks: ['htmlhint'] }}

Luego, ejecute grunt watchen la terminal. Ahora, intenta agregar un comentario a index.html. ¡Notarás que cuando se guarda el archivo, la validación es automática! Esto es una gran ayuda para el desarrollo porque significa que watchse validará silenciosamente a medida que escriba el código y fallará si el código no ha pasado las pruebas pertinentes (y le dirá cuál es el problema).

Tenga en cuenta que grunt watchseguirá ejecutándose hasta que se cierre el terminal o hasta que se detenga ( Control + Cen una Mac).

Mantener JavaScript lo más optimizado posible

Configuremos un archivo JavaScript para validar el nombre de un usuario. Para que esto sea lo más sencillo posible, comprobaremos únicamente los caracteres no alfabéticos. También usaremos el strictmodo JavaScript, que nos impide escribir JavaScript válido pero de mala calidad. Pegue lo siguiente en assets/js/base.js:

function Validator(){ "use strict";}Validator.prototype.checkName = function(name){ "use strict"; return (/[^a-z]/i.test(name) === false);};window.addEventListener('load', function(){ "use strict"; document.getElementById('firstname').addEventListener('blur', function(){ var _this = this; var validator = new Validator(); var validation = document.getElementById('namevalidation'); if (validator.checkName(_this.value) === true) { validation.innerHTML = 'Looks good! :)'; validation.className = "validation yep"; _this.className = "yep"; } else { validation.innerHTML = 'Looks bad! :('; validation.className = "validation nope"; _this.className = "nope"; } });});

Usemos UglifyJS para minimizar este archivo fuente. Añade esto a grunt.initConfig:

uglify: { build: { files: { 'build/js/base.min.js': ['assets/js/base.js'] } }}

UglifyJS comprime todos los nombres de variables y funciones en nuestro archivo fuente para ocupar el menor espacio posible y luego recorta los espacios en blanco y los comentarios, lo cual es extremadamente útil para la producción de JavaScript. Nuevamente, tenemos que configurar una watchtarea para construir nuestro JavaScript Uglify. Agregue esto a la watchconfiguración:

watch: { js: { files: ['assets/js/base.js'], tasks: ['uglify'] }}

Construyendo CSS a partir de archivos fuente Sass

Sass es increíblemente útil para trabajar con CSS, especialmente en equipo. Generalmente se escribe menos código en el archivo fuente porque Sass puede generar grandes bloques de código CSS con cosas como funciones y variables. Caminar por Sass está un poco más allá del alcance de este artículo; Por lo tanto, si no se siente cómodo aprendiendo a utilizar un preprocesador en esta etapa, puede omitir esta sección. Pero cubriremos un caso de uso muy simple, usando variables, un mixin y la sintaxis Sassy CSS (SCSS), que es muy similar a CSS.

El complemento Sass de Grunt requiere la gema Sass. Necesitará instalar Ruby en su sistema (viene precargado en OS X). Puede comprobar si Ruby está instalado con este comando de terminal:

ruby -v

Instale Sass ejecutando lo siguiente:

gem install sass

Dependiendo de su configuración, es posible que necesite ejecutar este comando a través de sudo, es decir, sudo gem install sass:momento en el que se le pedirá su contraseña. Cuando Sass esté instalado, cree un nuevo directorio llamado assetsy, dentro de él, otro llamado sass. Cree un nuevo archivo con el nombre master.scssde este directorio y pegue lo siguiente en él:

@mixin prefix($property, $value, $prefixes: webkit moz ms o spec) { @each $p in $prefixes { @if $p == spec { #{$property}: $value; } @else { -#{$p}-#{$property}: $value; } }}$input_field: #999;$input_focus: #559ab9;$validation_passed: #8aba56;$validation_failed: #ba5656;$bg_colour: #f4f4f4;$box_colour: #fff;$border_style: 1px solid;$border_radius: 4px;html { background: $bg_colour;}body { width: 720px; padding: 40px; margin: 80px auto; background: $box_colour; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); border-radius: $border_radius; font-family: sans-serif;}input[type="text"] { @include prefix(appearance, none, webkit moz); @include prefix(transition, border .3s ease); border-radius: $border_radius; border: $border_style $input_field; width: 220px;}input[type="text"]:focus { border-color: $input_focus; outline: 0;}label,input[type="text"],.validation { line-height: 1; font-size: 1em; padding: 10px; display: inline; margin-right: 20px;}input.yep { border-color: $validation_passed;}input.nope { border-color: $validation_failed;}p.yep { color: $validation_passed;}p.nope { color: $validation_failed;}

Notarás que la extensión SCSS se parece mucho más a CSS que a Sass convencional. Esta hoja de estilo utiliza dos características de Sass: mixins y variables. Un mixin construye un bloque de CSS basado en algunos parámetros que se le pasan, de forma muy similar a como lo haría una función, y las variables permiten que fragmentos comunes de CSS se definan una vez y luego se reutilicen.

Variables are especially useful for hex colours; we can build a palette that can be changed in one place, which makes tweaking aspects of a design very fast. The mixin is used to prefix rules such as for appearance and transitions, and it reduces bulk in the file itself.

When working with a large style sheet, anything that can be done to reduce the number of lines will make the file easier to read when a team member other than you wants to update a style.

In addition to Sass, grunt-cssc combines CSS rules together, ensuring that the generated CSS has minimal repetition. This can be very useful in medium- to large-scale projects in which a lot of styles are repeated. However, the outputted file is not always the smallest possible. This is where the cssmin task comes in. It not only trims out white space, but transforms colors to their shortest possible values (so, white would become #fff). Add these tasks to gruntfile.js:

cssc: { build: { options: { consolidateViaDeclarations: true, consolidateViaSelectors: true, consolidateMediaQueries: true }, files: { 'build/css/master.css': 'build/css/master.css' } }},cssmin: { build: { src: 'build/css/master.css', dest: 'build/css/master.css' }},sass: { build: { files: { 'build/css/master.css': 'assets/sass/master.scss' } }}

Now that we have something in place to handle style sheets, these tasks should also be run automatically. The build directory is created automatically by Grunt to house all of the production scripts, CSS and (if this were a full website) compressed images. This means that the contents of the assets directory may be heavily commented and may contain more documentation files for development purposes; then, the build directory would strip all of that out, leaving the assets as optimized as possible.

We’re going to define a new set of tasks for working with CSS. Add this line to gruntfile.js, below the default task:

grunt 
 
 
 
 
 
Tal vez te puede interesar:
 
¿Deberían abrirse los enlaces en ventanas nuevas?
 
24 excelentes tutoriales de AJAX
 
70 técnicas nuevas y útiles de AJAX y JavaScript
 
Más de 45 excelentes recursos y repositorios de fragmentos de código
 
 
 

Ponte en marcha con Grunt

Empezando con gruñidoConfiguraciónCargando tareas npm en GruntValidar con HTMLHintAutomatice las tareas que se ejecutan cada vez que se guarda un archivoMant

programar

es

https://aprendeprogramando.es/static/images/programar-ponte-en-marcha-con-grunt-829-0.jpg

2025-01-14

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente