# 29: Tuotannon valmistelu - CSS-temppuja

Tuomme sen takaisin normaaliin tekstieditoriin tässä kuvaruudussa, aivan kuin aloitimme. "Todellisessa maailmassa" nämä asiat ovat totta:

Haluat jakaa JavaScriptin niin moniin pieniin tiedostoihin kuin sinulle on järkevää. Aivan kuten hajotimme JavaScript-koodin pieniksi ymmärrettäviksi toiminnoiksi, voimme tehdä samoin tiedostoilla. Muista var Movies = ( );Että objekti olisi todennäköisesti se oma tiedosto.
Nämä pienemmät tiedostot tulisi ketjuttaa (yhdistää yhdeksi tiedostoksi) ja pakata (juoksi minisointijärjestelmän läpi tyhjätilan poistamiseksi ja jopa muuttujien uudelleenkirjoittamiseksi ja siten lopullisen tiedostokoon pienentämiseksi).

Liittämisen ja pakkaamisen tehtävät ovat niin yleisiä, että riippumatta siitä, mikä työnkulku on, siellä on todennäköisesti työkalu, joka sopii auttamaan.

CodeKit on Mac-ohjelmisto, joka voi auttaa tässä.

Sinulla on CodeKit katsella koko projektikansiosi. Se löytää sen sisältä JavaScript-tiedostot (tiedostot, jotka päättyvät .js: ään tai jopa .coffeeiin, jos haluat kirjoittaa CoffeeScript: iin). Komentosarjat-välilehdessä se listaa ne kaikki. Voit napsauttaa yhtä niistä ja valita sitten vaihtoehdot, mitä tehdä, kun tiedostoa muutetaan ja tallennetaan (missä tahansa tekstieditorissa).

Yllä olevasta kuvakaappauksesta näet itse CSS-Tricksista, että minulla on global.jstiedosto, joka tuo useita muita tiedostoja (riippuvuuksia). Kun kyseistä tiedostoa muutetaan / tallennetaan, se tarkistetaan JS Hintin kautta, riippuvuudet lisätään tai lisätään määritetyllä tavalla, sitten lopullinen tiedosto luodaan ( global-ck.js) ja pienennetään. Aika siistiä!

Voit hallita näitä riippuvuuksia suoraan CodeKit-käyttöliittymän kautta, mutta se on todennäköisesti parasta tehdä koodikommenttien kautta suoraan JS-tiedostossa:

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

Sitten linkität -ck.jsJavaScript-version HTML-koodiin.

Entä jos et ole Macissa? Voit etsiä Googlelta vaihtoehtoja. Yhdistäisin täällä, mutta tuo maailma muuttuu jatkuvasti. Tiedän varmasti, että on joitain, jotka lähinnä kopioivat CodeKit-ulkoasun ja toiminnallisuuden, mutta toimivat eri selaimilla ja ovat avoimen lähdekoodin.

Oletetaan, että projektisi on Ruby on Rails. Railsilla on Asset Pipeline, joka tekee nämä tehtävät myös sinulle.

Aivan kuten CodeKitilla on erityisesti muotoiltuja kommentteja, jotta se tietää riippuvuudet, myös Asset Pipeline tekee:

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

Sitten linkität kyseisen JavaScript-tiedoston malleistasi, kuten:

Se on mielestäni melko mukava järjestelmä. Muutamista syistä. Yksi on se, että kehityksessä tiedostot pysyvät erillisinä, mikä on mukavaa virheenkorjaukseen DevToolsissa. Toinen on se, että käyttöönoton jälkeen tiedostoilla on välimuistin rikkomisen merkkijonot tiedostonimissä, mikä on tärkeä askel, jos palvelet kaukana vanhentuneita otsikoita hyvään välimuistiin.

Nämä eivät tietenkään ole ainoat kaksi vaihtoehtoa. Luultavasti on lukemattomia tapoja tehdä tämä. Toinen erittäin suosittu tekniikka on nykyään Grunt.

Voit käyttää grunt-contrib-concat ja grunt-contrib-uglify näiden "tehtävien" suorittamiseen.

Tässä on esimerkki Gruntfile.js: stä, joka vie kansion, joka on täynnä kirjastoyhteyksiä, ja global.js-tiedoston, yhdistää ja pienentää ne tuotantoon.min.js-tiedostoksi:

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

Sitten yksinkertaisesti kirjoittamalla "grunt" komentoriviltä projektikansiostasi, se toimii sinulle. Grunt voi kuitenkin saada enemmän fancy, vaikka epäilet. Joka on toinen päivä!

Olen koonnut esimerkkiprojektin (niille teistä, joilla on latausoikeudet), jotta voit sietää nähdäksesi kuinka tämä Grunt-asia toimii. Edellytykset: