# 29: Förbereda produktionen - CSS-tricks

Vi kommer att ta tillbaka det till en vanlig textredigerare i den här skärmutsändningen, precis som vi började. I en ”verklig värld” är dessa saker sanna:

Du vill dela upp JavaScript i så många små filer som det är vettigt för dig. Precis som vi delade upp JavaScript-koden i små begripliga funktioner, kan vi göra detsamma med filer. Kom ihåg var Movies = ( );Det objektet skulle förmodligen vara den egna filen.
Dessa mindre filer ska sammanfogas (kombineras i en fil) och komprimeras (körs genom ett minifieringssystem för att ta bort blanksteg och till och med skriva om variabler och sådant för att minska den slutliga filstorleken).

Uppgifterna för sammanfogning och komprimering är så vanliga att oavsett vad ditt arbetsflöde finns finns det troligen ett verktyg som passar in för att hjälpa till.

CodeKit är Mac-programvara som kan hjälpa till med detta.

Du har CodeKit titta på hela projektmappen. Det hittar JavaScript-filer inuti den (filer som slutar på .js eller till och med .coffee om du föredrar att skriva i CoffeeScript). Under fliken Skript listas alla. Du kan klicka på en av dem och sedan välja alternativ för vad du ska göra när filen ändras och sparas (av valfri textredigerare).

I skärmdumpen ovan kan du se på CSS-Tricks själv att jag har en global.jsfil som importerar ett antal andra filer (beroenden). När filen ändras / sparas kontrolleras den via JS Hint, beroendena läggs till eller förberedas enligt specifikation, sedan skapas den slutliga filen ( global-ck.js) och minifieras. Ganska cool!

Du kan hantera dessa beroenden direkt genom CodeKit UI, men det är nog bäst att göra det genom kodkommentarer direkt i själva 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 skulle sedan länka upp -ck.jsversionen av JavaScript i HTML.

Vad händer om du inte använder Mac? Du kan Google runt för alternativ. Jag skulle länka några här men den världen förändras ständigt. Jag vet med säkerhet att det finns några som i huvudsak kopierar CodeKit-utseendet och funktionaliteten, men fungerar i webbläsare och är öppen källkod.

Låt oss säga att ditt projekt är Ruby on Rails. Rails har Asset Pipeline som också gör dessa uppgifter för dig.

Precis som CodeKit har speciellt formaterade kommentarer för att berätta vad beroenden är, gör tillgångspipelinen också:

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

Du länkar sedan upp JavaScript-filen från dina mallar som:

Jag tycker det är ett ganska trevligt system. Av några anledningar. En är att filerna under utveckling kommer att förbli separata, vilket är trevligt för felsökning i DevTools. Ett annat är att filerna efter distributionen kommer att ha cache-busting-strängar i filnamnen, vilket är ett viktigt steg om du serverar långt bort utgår rubriker för bra cachning.

Det här är naturligtvis inte de enda två alternativen. Det finns förmodligen otaliga sätt att göra detta. En annan mycket populär teknik idag är Grunt.

Du kan använda grunt-contrib-concat och grunt-contrib-uglify för att göra dessa "uppgifter".

Här är ett exempel på Gruntfile.js som tar en mapp full av biblioteksberoenden och en global.js-fil och sammanfogar och förminskar dem till 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')); );

Skriv bara "grunt" från kommandoraden från din projektmapp för att göra det åt dig. Grunt kan dock bli mycket snyggare, som du kanske misstänker. Vilket måste bli en annan dag!

Jag har sammanställt ett exempelprojekt (för er med nedladdningsåtkomst) så att du kan peka på för att se hur den här Grunt-saken fungerar. Förutsättningarna: