# 29: Gør klar til produktion - CSS-tricks

Vi vil bringe det tilbage til en normal teksteditor i denne screencast, lige som vi startede. I en “reel verden” situation er disse ting sande:

Du vil opdele din JavaScript i så mange små filer, som det giver mening for dig. Ligesom vi opdelte JavaScript-koden i små forståelige funktioner, kan vi gøre det samme med filer. Husk var Movies = ( );Det objekt ville sandsynligvis være dets egen fil.
Disse mindre filer skal sammenkædes (kombineres til en fil) og komprimeres (køres gennem et minificeringssystem for at fjerne det hvide område og endda omskrive variabler og sådan for at reducere den endelige filstørrelse).

Opgaverne til sammenkædning og komprimering er så almindelige, at uanset hvad din arbejdsgang er, er der sandsynligvis et værktøj, der passer ind til at hjælpe.

CodeKit er Mac-software, der kan hjælpe med dette.

Du har CodeKit se hele din projektmappe. Det finder JavaScript-filer inde i det (filer, der ender på .js eller endda .coffee, hvis du foretrækker at skrive i CoffeeScript). Under fanen Scripts viser den dem alle. Du kan klikke på en af dem og derefter vælge muligheder for, hvad du skal gøre, når filen ændres og gemmes (af en hvilken som helst teksteditor).

I skærmbilledet ovenfor kan du se på CSS-Tricks selv, at jeg har en global.jsfil, der importerer et antal andre filer (afhængigheder). Når denne fil ændres / gemmes, kontrolleres den via JS Hint, afhængighederne tilføjes eller forudbestilles som angivet, hvorefter den endelige fil oprettes ( global-ck.js) og minificeres. Temmelig sejt!

Du kan administrere disse afhængigheder lige gennem CodeKit UI, men det er sandsynligvis bedst at gøre det gennem kodekommentarer lige i selve JS-filen:

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

Du vil derefter linke -ck.jsversionen af JavaScript i HTML.

Hvad hvis du ikke er på Mac? Du kan Google rundt for at finde alternativer. Jeg vil forbinde nogle heroppe, men den verden er under konstant forandring. Jeg ved helt sikkert, at der er nogle, der i det væsentlige kopierer CodeKit-udseendet og -funktionaliteten, men fungerer på tværs af browseren og er open source.

Lad os sige, at dit projekt er Ruby on Rails. Rails har Asset Pipeline, som også udfører disse opgaver for dig.

Ligesom CodeKit har specielt formaterede kommentarer for at fortælle det, hvad afhængighederne er, gør også Asset Pipeline:

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

Du linker derefter JavaScript-filen fra dine skabeloner som:

Jeg synes, det er et ret flot system. Af nogle få grunde. Den ene er, at filerne under udvikling forbliver adskilte, hvilket er rart til fejlfinding i DevTools. En anden er, at filerne efter implementering vil have cache-busting strenge i filnavne, hvilket er et vigtigt skridt, hvis du serverer langt ud udløber overskrifter for god caching.

Dette er naturligvis ikke de eneste to muligheder. Der er sandsynligvis utallige måder at gøre dette på. En anden meget populær teknik i disse dage er Grunt.

Du kan bruge grunt-contrib-concat og grunt-contrib-uglify til at udføre disse "opgaver".

Her er et eksempel på Gruntfile.js, der tager en mappe fuld af biblioteksafhængigheder og en global.js-fil og sammenkæder og minificerer dem til en produktion.min.js-fil:

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')); );

Derefter skal du blot skrive "grunt" fra kommandolinjen fra din projektmappe gøre det for dig. Grunt kan dog blive meget mere fancy, som du måske har mistanke om. Hvilket bliver en anden dag!

Jeg har sammensat et eksempel på et projekt (til dem af jer med downloadadgang), så du kan poke på for at se, hvordan denne Grunt-ting fungerer. Forudsætningerne: