# 29: Préparer la production - Astuces CSS

Nous allons le ramener dans un éditeur de texte normal dans ce screencast, tout comme nous avons commencé. Dans une situation «réelle», ces choses sont vraies:

Vous souhaitez diviser votre JavaScript en autant de petits fichiers que vous le souhaitez. Tout comme nous avons divisé le code JavaScript en petites fonctions compréhensibles, nous pouvons faire de même avec les fichiers. Rappelez-vous var Movies = ( );Cet objet serait probablement son propre fichier.
Ces fichiers plus petits doivent être concaténés (combinés en un seul fichier) et compressés (exécutés à travers un système de minification pour supprimer les espaces et même réécrire les variables et ainsi de suite pour réduire la taille finale du fichier).

Les tâches de concaténation et de compression sont si courantes que quel que soit votre flux de travail, il existe probablement un outil qui pourra vous aider.

CodeKit est un logiciel Mac qui peut vous aider.

CodeKit surveille l'intégralité de votre dossier de projet. Il y trouvera des fichiers JavaScript (fichiers qui se terminent par .js, ou même .coffee si vous préférez écrire en CoffeeScript). Sous l'onglet Scripts, il les listera tous. Vous pouvez cliquer sur l'un d'entre eux, puis choisir les options à suivre lorsque ce fichier est modifié et enregistré (par n'importe quel éditeur de texte).

Dans la capture d'écran ci-dessus, vous pouvez voir sur CSS-Tricks lui-même j'ai un global.jsfichier qui importe un certain nombre d'autres fichiers (dépendances). Lorsque ce fichier est modifié / enregistré, il est vérifié via JS Hint, les dépendances sont ajoutées ou ajoutées comme spécifié, puis le fichier final est créé ( global-ck.js) et minifié. Plutôt cool!

Vous pouvez gérer ces dépendances directement via l'interface utilisateur de CodeKit, mais il est probablement préférable de le faire via des commentaires de code directement dans le fichier JS lui-même:

// 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"

Vous lieriez ensuite la -ck.jsversion du JavaScript dans le HTML.

Et si vous n'êtes pas sur Mac? Vous pouvez rechercher des alternatives sur Google. J'en relierais quelques-uns ici, mais ce monde est en constante évolution. Je sais avec certitude que certains copient essentiellement le look et les fonctionnalités de CodeKit, mais fonctionnent avec plusieurs navigateurs et sont open source.

Disons que votre projet est Ruby on Rails. Rails a le pipeline d'actifs qui effectue ces tâches pour vous également.

Tout comme CodeKit a des commentaires spécialement formatés pour lui faire savoir quelles sont les dépendances, le pipeline d'actifs le fait aussi:

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

Vous liez ensuite ce fichier JavaScript à partir de vos modèles comme:

C'est un système plutôt sympa, je pense. Pour plusieurs raisons. La première est que dans le développement, les fichiers resteront séparés, ce qui est bien pour le débogage dans les DevTools. Une autre est qu'après le déploiement, les fichiers auront des chaînes de contournement du cache dans les noms de fichiers, ce qui est une étape importante si vous diffusez des en-têtes d'expiration éloignés pour une bonne mise en cache.

Ce ne sont pas non plus les deux seules options, bien sûr. Il existe probablement d'innombrables façons de le faire. Une autre technique très populaire ces jours-ci est Grunt.

Vous pouvez utiliser grunt-contrib-concat et grunt-contrib-uglify pour effectuer ces «tâches».

Voici un exemple de Gruntfile.js qui prendrait un dossier plein de dépendances de bibliothèques et un fichier global.js et les concatinerait et les réduirait dans un fichier 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')); );

Ensuite, tapez simplement «grunt» à partir de la ligne de commande à partir du dossier de votre projet le fera pour vous. Grunt peut cependant devenir beaucoup plus sophistiqué, comme vous vous en doutez. Ce qui devra être un autre jour!

J'ai mis en place un exemple de projet (pour ceux d'entre vous qui ont accès au téléchargement) afin que vous puissiez voir comment fonctionne ce truc Grunt. Les prérequis: