# 29: Tootmise ettevalmistamine - CSS-trikid

Toome selle ekraanipildi tavalisele tekstiredaktorile välja kohe, kui alustasime. Reaalses olukorras on need asjad tõsi:

Soovite jagada oma JavaScripti nii paljudeks väikesteks failideks, kui teile mõistlik on. Nii nagu jagasime JavaScripti koodi väikesteks arusaadavateks funktsioonideks, saame ka failidega sama teha. Pea meeles, et Movies = ( );see objekt oleks tõenäoliselt selle enda fail.
Need väiksemad failid tuleks liita (ühendada kokku üheks failiks) ja tihendada (läbida minimeerimissüsteem tühimärkide eemaldamiseks ja muutujate isegi ümberkirjutamiseks ning nii, et faili lõplik suurus väheneks).

Liitmise ja tihendamise ülesanded on nii tavalised, et olenemata sellest, milline on teie töövoog, on tõenäoliselt abiks sobiv tööriist.

CodeKit on Maci tarkvara, mis võib selles aidata.

Teil on CodeKitil kogu projekti kaust. See leiab selle seest JavaScripti failid (failid, mis lõpevad .js või isegi .coffee, kui eelistate kirjutada CoffeeScriptis). Vahekaardil Skriptid loetleb see kõik. Võite klõpsata ühel neist ja seejärel valida suvandid, mida teha, kui seda faili muudetakse ja salvestatakse (mis tahes tekstiredaktori poolt).

Ülaltoodud ekraanipildil näete CSS-Tricksis endal. Mul on global.jsfail, mis impordib mitmeid muid faile (sõltuvusi). Kui seda faili muudetakse / salvestatakse, kontrollitakse seda JS Hinti kaudu, sõltuvused lisatakse või lisatakse vastavalt määratlusele, seejärel luuakse lõplik fail ( global-ck.js) ja minimeeritakse. Päris lahe!

Neid sõltuvusi saate hallata otse CodeKiti kasutajaliidese kaudu, kuid ilmselt on kõige parem seda teha otse JS-faili koodikommentaaride kaudu:

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

Seejärel linkiksite -ck.jsHTML-is JavaScripti versiooni.

Mis siis, kui te ei kasuta Maci? Võite alternatiivide otsimiseks Google'i lehitseda. Ma linkiksin mõned siia üles, kuid see maailm on pidevalt muutuv. Ma tean kindlalt, et on mõnda, mis sisuliselt kopeerib CodeKiti välimust ja funktsionaalsust, kuid töötab brauseritevaheliselt ja on avatud lähtekoodiga.

Oletame, et teie projekt on Ruby on Rails. Railsil on Asset Pipeline, mis teeb need ülesanded ka teie jaoks.

Nii nagu CodeKitil on spetsiaalselt vormindatud kommentaarid, et anda teada, millised on sõltuvused, teeb seda ka varade torujuhe:

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

Seejärel linkige see JavaScripti fail oma mallidest, näiteks:

See on minu arvates päris kena süsteem. Mõnel põhjusel. Üks on see, et arendamise käigus jäävad failid eraldi, mis on DevToolsi silumiseks hea. Teine on see, et pärast juurutamist on failidel vahemälu kustutavaid stringe failinimedes, mis on oluline samm, kui serveerite hea vahemälu jaoks head-head päiseid.

Need pole muidugi ka ainsad kaks võimalust. Tõenäoliselt on selleks lugematu arv viise. Teine tänapäeval väga populaarne tehnika on Grunt.

Nende "ülesannete" tegemiseks võite kasutada grunt-contrib-concat ja grunt-contrib-uglify.

Siin on näide Gruntfile.js, mis võtaks kaust täis raamatukogu sõltuvusi ja global.js-faili ning ühendaks ja minimeeriks need failiks 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')); );

Seejärel saate lihtsalt oma projekti kaustast käsurealt "grunt" tippida. Nagu võite arvata, võib nurin siiski uhkemaks minna. Mis peab olema veel üks päev!

Ma olen kokku pannud näidisprojekti (neile, kellel on allalaadimisjuurdepääs), et saaksite pistma minna, et näha, kuidas see Grunti asi töötab. Eeldused: