# 29: Gjør produksjonsklar - CSS-triks

Vi kommer til å bringe det tilbake til en vanlig tekstredigerer i denne skjermsendingen, akkurat som vi startet. I en "ekte verden" -situasjon stemmer disse tingene:

Du vil dele opp JavaScript i så mange små filer som det er fornuftig for deg. Akkurat som vi brøt opp JavaScript-koden i små forståelige funksjoner, kan vi gjøre det samme med filer. Husk var Movies = ( );Det objektet vil sannsynligvis være sin egen fil.
Disse mindre filene bør sammenkobles (kombineres til en fil) og komprimeres (kjøres gjennom et minifiseringssystem for å fjerne mellomrom og til og med omskrive variabler og slikt for å redusere den endelige filstørrelsen).

Oppgavene med sammenføyning og komprimering er så vanlige at uansett hva arbeidsflyten din er, er det sannsynligvis et verktøy som passer inn for å hjelpe.

CodeKit er Mac-programvare som kan hjelpe med dette.

Du har CodeKit se hele prosjektmappen. Den vil finne JavaScript-filer inne i den (filer som ender på .js, eller til og med .coffee hvis du foretrekker å skrive i CoffeeScript). Under fanen Skript vil den liste dem alle. Du kan klikke på en av dem og deretter velge alternativer for hva du skal gjøre når filen endres og lagres (av hvilken som helst teksteditor).

I skjermbildet ovenfor kan du se på CSS-Tricks i seg selv at jeg har en global.jsfil som importerer en rekke andre filer (avhengigheter). Når den filen er endret / lagret, blir den sjekket via JS Hint, avhengighetene blir lagt til eller forhåndsbehandlet som spesifisert, deretter blir den endelige filen opprettet ( global-ck.js) og minifisert. Ganske kult!

Du kan administrere disse avhengighetene rett gjennom CodeKit UI, men det er sannsynligvis best å gjøre det gjennom kodekommentarer rett 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 da koble opp -ck.jsversjonen av JavaScript i HTML.

Hva om du ikke er på Mac? Du kan Google rundt for å finne alternativer. Jeg vil koble noen opp her, men den verden er i stadig endring. Jeg vet helt sikkert at det er noen som i hovedsak kopierer CodeKit-utseendet og funksjonaliteten, men som fungerer i nettleser og er åpen kildekode.

La oss si at prosjektet ditt er Ruby on Rails. Rails har Asset Pipeline som også gjør disse oppgavene for deg.

Akkurat som CodeKit har spesialformaterte kommentarer for å fortelle hva avhengighetene er, gjør også Asset Pipeline:

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

Du kobler deretter JavaScript-filen fra malene dine som:

Det er et ganske fint system synes jeg. Av noen få grunner. Det ene er at filene under utvikling vil forbli separate, noe som er fint for feilsøking i DevTools. En annen er at filene etter distribusjon vil ha cache-busting-strenger i filnavnene, noe som er et viktig skritt hvis du serverer fjernt utløper overskrifter for god caching.

Dette er selvfølgelig ikke de eneste to alternativene. Det er sannsynligvis utallige måter å gjøre dette på. En annen veldig populær teknikk i disse dager er Grunt.

Du kan bruke grunt-contrib-concat og grunt-contrib-uglify til å gjøre disse "oppgavene".

Her er et eksempel på Gruntfile.js som tar en mappe full av biblioteksavhengigheter og en global.js-fil og sammenkobler og minifiserer dem til en production.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')); );

Så bare å skrive "grunt" fra kommandolinjen fra prosjektmappen vil gjøre det for deg. Grunt kan bli mye mer fancy skjønt, som du kanskje mistenker. Som må være en annen dag!

Jeg har satt sammen et eksempel på et prosjekt (for de av dere med tilgang til nedlasting) slik at du kan peke på for å se hvordan denne Grunt-tingen fungerer. Forutsetningene: