# 29: Preparare la produzione - Trucchi CSS

Lo riporteremo su un normale editor di testo in questo screencast, proprio come abbiamo iniziato. In una situazione di "mondo reale", queste cose sono vere:

Vuoi suddividere il tuo JavaScript in tanti piccoli file quanti ne ritieni abbia senso. Proprio come abbiamo suddiviso il codice JavaScript in piccole funzioni comprensibili, possiamo fare lo stesso con i file. Ricorda var Movies = ( );Quell'oggetto sarebbe probabilmente il suo file.
Quei file più piccoli dovrebbero essere concatenati (combinati insieme in un file) e compressi (fatti passare attraverso un sistema di minificazione per rimuovere gli spazi bianchi e persino riscrivere le variabili e simili per ridurre la dimensione del file finale).

Le attività di concatenazione e compressione sono così comuni che indipendentemente dal flusso di lavoro, probabilmente esiste uno strumento che si adatterà per aiutarti.

CodeKit è un software per Mac che può aiutare in questo.

Hai CodeKit che controlla l'intera cartella del progetto. Troverà file JavaScript al suo interno (file che terminano con .js, o anche .coffee se preferisci scrivere in CoffeeScript). Nella scheda Script, li elencherà tutti. È possibile fare clic su uno di essi e quindi scegliere le opzioni per cosa fare quando il file viene modificato e salvato (da qualsiasi editor di testo).

Nello screenshot qui sopra, puoi vedere su CSS-Tricks stesso che ho un global.jsfile che importa una serie di altri file (dipendenze). Quando quel file viene modificato / salvato, viene controllato tramite JS Hint, le dipendenze vengono aggiunte o anteposte come specificato, quindi il file finale viene creato ( global-ck.js) e minimizzato. Abbastanza bello!

Puoi gestire queste dipendenze direttamente tramite l'interfaccia utente di CodeKit, ma probabilmente è meglio farlo tramite i commenti sul codice direttamente nel file JS stesso:

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

Dovresti quindi collegare la -ck.jsversione di JavaScript nell'HTML.

E se non sei su Mac? Puoi cercare alternative su Google. Ne collegherei alcuni qui, ma quel mondo è in continua evoluzione. So per certo che ce ne sono alcuni che essenzialmente copiano l'aspetto e le funzionalità di CodeKit ma funzionano su più browser e sono open source.

Supponiamo che il tuo progetto sia Ruby on Rails. Rails ha l'Asset Pipeline che svolge anche queste attività per te.

Proprio come CodeKit ha commenti formattati in modo speciale per fargli sapere quali sono le dipendenze, anche Asset Pipeline fa:

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

Quindi colleghi quel file JavaScript dai tuoi modelli come:

È un sistema piuttosto carino, credo. Per alcuni motivi. Uno è che durante lo sviluppo i file rimarranno separati, il che è utile per il debug in DevTools. Un altro è che dopo la distribuzione i file avranno stringhe di busting della cache nei nomi dei file, che è un passaggio importante se si servono intestazioni di scadenze estese per una buona memorizzazione nella cache.

Ovviamente queste non sono le uniche due opzioni. Probabilmente ci sono innumerevoli modi per farlo. Un'altra tecnica molto popolare in questi giorni è Grunt.

Potresti usare grunt-contrib-concat e grunt-contrib-uglify per fare questi "compiti".

Ecco un esempio di Gruntfile.js che prenderebbe una cartella piena di dipendenze dalla libreria e un file global.js e li concatenò e li minimizzerebbe in un file 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')); );

Quindi semplicemente digitando "grunt" dalla riga di comando dalla cartella del progetto lo farà per te. Grunt può diventare molto più stravagante, come potresti sospettare. Quale dovrà essere un altro giorno!

Ho messo insieme un progetto di esempio (per quelli di voi con accesso al download) in modo che possiate dare un'occhiata per vedere come funziona questa cosa di Grunt. I prerequisiti: