# 29: Productie gereed maken - CSS-trucs

We gaan het in deze screencast terugbrengen naar een normale teksteditor, net zoals we begonnen. In een 'echte wereld'-situatie zijn deze dingen waar:

U wilt uw JavaScript opsplitsen in zoveel kleine bestanden als u wilt. Net zoals we de JavaScript-code hebben opgesplitst in kleine begrijpelijke functies, kunnen we hetzelfde doen met bestanden. Onthoud var. Movies = ( );Dat object zou waarschijnlijk zijn eigen bestand zijn.
Die kleinere bestanden moeten worden samengevoegd (gecombineerd tot één bestand) en gecomprimeerd (door een minificatiesysteem gehaald om witruimte te verwijderen en zelfs variabelen te herschrijven en dergelijke om de uiteindelijke bestandsgrootte te verkleinen).

De taken van aaneenschakeling en compressie komen zo vaak voor dat, wat uw workflow ook is, er waarschijnlijk een tool is die daarbij past.

CodeKit is Mac-software die hierbij kan helpen.

Je hebt CodeKit om je hele projectmap te bekijken. Het zal JavaScript-bestanden erin vinden (bestanden die eindigen op .js, of zelfs .coffee als je liever in CoffeeScript schrijft). Onder het tabblad Scripts worden ze allemaal weergegeven. U kunt op een ervan klikken en vervolgens opties kiezen voor wat u wilt doen als dat bestand wordt gewijzigd en opgeslagen (door een teksteditor).

In de bovenstaande schermafbeelding kun je op CSS-Tricks zelf zien dat ik een global.jsbestand heb dat een aantal andere bestanden (afhankelijkheden) importeert. Wanneer dat bestand is gewijzigd / opgeslagen, wordt het gecontroleerd via JS Hint, worden de afhankelijkheden toegevoegd of toegevoegd zoals gespecificeerd, en vervolgens wordt het uiteindelijke bestand gemaakt ( global-ck.js) en verkleind. Best wel gaaf!

U kunt die afhankelijkheden rechtstreeks via de CodeKit-gebruikersinterface beheren, maar het is waarschijnlijk het beste om dit te doen via codecommentaar rechtstreeks in het JS-bestand zelf:

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

U koppelt dan de -ck.jsversie van het JavaScript in de HTML.

Wat als u geen Mac gebruikt? U kunt rond Google zoeken naar alternatieven. Ik zou er hier een paar koppelen, maar die wereld verandert voortdurend. Ik weet zeker dat er enkele zijn die in wezen de CodeKit-look en -functionaliteit kopiëren, maar browseroverschrijdend werken en open source zijn.

Stel dat uw project Ruby on Rails is. Rails heeft de Asset Pipeline die deze taken ook voor u doet.

Net zoals CodeKit speciaal opgemaakte opmerkingen heeft om te laten weten wat de afhankelijkheden zijn, doet de Asset Pipeline dat ook:

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

Vervolgens koppelt u dat JavaScript-bestand aan uw sjablonen, zoals:

Het is een best aardig systeem denk ik. Om een paar redenen. Een daarvan is dat tijdens de ontwikkeling de bestanden gescheiden blijven, wat handig is voor foutopsporing in DevTools. Een andere is dat de bestanden na implementatie cache-busting-strings in de bestandsnamen hebben, wat een belangrijke stap is als je far-out expires-headers gebruikt voor een goede caching.

Dit zijn natuurlijk ook niet de enige twee opties. Er zijn waarschijnlijk talloze manieren om dit te doen. Een andere erg populaire techniek tegenwoordig is Grunt.

Je zou grunt-contrib-concat en grunt-contrib-uglify kunnen gebruiken om deze “taken” uit te voeren.

Hier is een voorbeeld van Gruntfile.js dat een map vol bibliotheekafhankelijkheden en een global.js-bestand zou nemen en deze zou samenvoegen en verkleinen tot een production.min.js-bestand:

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

Het simpelweg typen van “grunt” vanaf de opdrachtregel vanuit uw projectmap zal dat voor u doen. Grunt kan echter veel chiquer worden, zoals je misschien vermoedt. Dat zal een andere dag moeten worden!

Ik heb een voorbeeldproject samengesteld (voor degenen onder jullie met downloadtoegang), zodat je kunt kijken hoe dit Grunt-ding werkt. De voorwaarden: