# 29: Preparando la producción - Trucos CSS

Tabla de contenido

Vamos a traerlo de vuelta a un editor de texto normal en este screencast, tal como comenzamos. En una situación del "mundo real", estas cosas son ciertas:

Desea dividir su JavaScript en tantos archivos pequeños como tenga sentido para usted. Al igual que dividimos el código JavaScript en pequeñas funciones comprensibles, podemos hacer lo mismo con los archivos. Recuerde var Movies = ( );Ese objeto probablemente sería su propio archivo.
Esos archivos más pequeños deben concatenarse (combinarse en un solo archivo) y comprimirse (ejecutarse a través de un sistema de minificación para eliminar los espacios en blanco e incluso reescribir variables y demás para reducir el tamaño del archivo final).

Las tareas de concatenación y compresión son tan comunes que no importa cuál sea su flujo de trabajo, es probable que haya una herramienta que se adapte a sus necesidades.

CodeKit es un software para Mac que puede ayudar con esto.

Tiene CodeKit mirando toda la carpeta de su proyecto. Encontrará archivos JavaScript dentro de él (archivos que terminan en .js, o incluso .coffee si prefiere escribir en CoffeeScript). En la pestaña Scripts, los enumerará todos. Puede hacer clic en uno de ellos y luego elegir opciones sobre qué hacer cuando ese archivo se cambia y se guarda (mediante cualquier editor de texto).

En la captura de pantalla anterior, puede ver que en CSS-Tricks tengo un global.jsarchivo que importa varios otros archivos (dependencias). Cuando ese archivo se cambia / guarda, se verifica a través de JS Hint, las dependencias se agregan o se anteponen como se especifica, luego se crea ( global-ck.js) y se minimiza el archivo final . ¡Muy genial!

Puede administrar esas dependencias directamente a través de la interfaz de usuario de CodeKit, pero probablemente sea mejor hacerlo a través de comentarios de código directamente en el archivo JS:

// put BEFORE the rest of the code in this file // @codekit-prepend "jquery.markitup.js" // put AFTER the rest of the code in this file // @codekit-append "prism.js"

Luego vincularía la -ck.jsversión de JavaScript en el HTML.

¿Qué pasa si no estás en Mac? Puede buscar alternativas en Google. Vincularía algunos aquí, pero ese mundo cambia constantemente. Sé con certeza que hay algunos que esencialmente copian el aspecto y la funcionalidad de CodeKit, pero funcionan en todos los navegadores y son de código abierto.

Digamos que su proyecto es Ruby on Rails. Rails tiene el Asset Pipeline que también hace estas tareas por usted.

Al igual que CodeKit tiene comentarios especialmente formateados para que sepa cuáles son las dependencias, Asset Pipeline también lo hace:

//= require libs/jquery.js //= require common/love.js var MyObject = ( // yadda yadaa )

Luego enlaza ese archivo JavaScript desde sus plantillas como:

Creo que es un sistema bastante bueno. Por algunas razones. Una es que, en desarrollo, los archivos permanecerán separados, lo cual es bueno para depurar en DevTools. Otro es que, después de la implementación, los archivos tendrán cadenas de eliminación de caché en los nombres de archivo, lo cual es un paso importante si está sirviendo encabezados de caducidad exagerada para un buen almacenamiento en caché.

Estas no son las únicas dos opciones, por supuesto. Probablemente hay innumerables formas de hacer esto. Otra técnica muy popular en estos días es Grunt.

Puede utilizar grunt-contrib-concat y grunt-contrib-uglify para realizar estas "tareas".

Aquí hay un Gruntfile.js de muestra que tomaría una carpeta llena de dependencias de bibliotecas y un archivo global.js y los concatinaría y minificaría en un archivo production.min.js:

module.exports = function(grunt) ( grunt.initConfig(( concat: ( dist: ( src: ( 'js/libs/*.js', 'js/global.js' ), dest: 'js/build/production.js', ) ), uglify: ( build: ( src: 'js/build/production.js', dest: 'js/build/production.min.js' ) ) )); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.registerTask('default', ('concat', 'uglify')); );

Luego, simplemente escribiendo "gruñido" desde la línea de comando desde la carpeta de su proyecto, lo hará por usted. Sin embargo, Grunt puede volverse mucho más elegante, como puedes sospechar. ¡Que tendrá que ser otro día!

He reunido un proyecto de ejemplo (para aquellos de ustedes con acceso de descarga) para que puedan ver cómo funciona esto de Grunt. Los prerrequisitos: