# 29: A gyártás előkészítése - CSS-trükkök

Anonim

Visszahozzuk egy normál szövegszerkesztőhöz ebben a képernyőn, ahogy elkezdtük. A „valós világban” ezek a dolgok igazak:

  1. A JavaScriptet annyi apró fájlra kívánja bontani, amennyi értelme van. Ahogy a JavaScript kódot apró, érthető funkciókra bontottuk, ugyanezt megtehetjük a fájlokkal is. Ne feledje var. Movies = ( );Ez az objektum valószínűleg a saját fájlja lesz.
  2. Ezeket a kisebb fájlokat össze kell összefűzni (egy fájlba kell egyesíteni) és tömöríteni (egy minifikációs rendszeren kell átfutniuk, hogy eltávolítsák a szóközöket, sőt a változókat is átírják, és így csökkentsék a végleges fájlméretet).

A összefűzés és a tömörítés feladatai annyira gyakoriak, hogy bármi is legyen a munkafolyamat, valószínűleg van egy eszköz, amely segítséget nyújt.

A CodeKit egy Mac szoftver, amely segíthet ebben.

A CodeKit a teljes projektmappát figyeli. JavaScript fájlokat talál benne (olyan fájlokat, amelyek .js vagy akár .coffee végződésűek, ha inkább a CoffeeScript-ben írsz). A Szkriptek fül alatt mindet felsorolja. Kattintson az egyikre, majd kiválaszthatja, hogy mit tegyen, ha a fájlt megváltoztatja és elmenti (bármilyen szövegszerkesztő).

A fenti képernyőképen láthatja magát a CSS-Tricks programot, hogy van egy global.jsfájlom, amely számos más fájlt (függőséget) importál. Amikor a fájlt megváltoztatja / elmenti, a JS Hint segítségével ellenőrzi, a függőségeket a megadott módon csatolja vagy előkészíti, majd létrehozza a végső fájlt ( global-ck.js) és tömöríti. Elég jó!

Ezeket a függőségeket közvetlenül a CodeKit kezelőfelületen keresztül kezelheti, de valószínűleg a legjobb, ha közvetlenül a JS fájlban található kódmegjegyzésekkel teszi:

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

Ezután összekapcsolja -ck.jsa JavaScript verzióját a HTML-ben.

Mi van, ha nem Mac-en van? A Google körül kereshet alternatívákat. Összekötnék néhányat ide, de ez a világ folyamatosan változik. Biztosan tudom, hogy vannak olyanok, amelyek lényegében a CodeKit megjelenését és funkcionalitását másolják, de böngészőkön átívelőek és nyílt forráskódúak.

Tegyük fel, hogy a projekt Ruby on Rails. A Rails rendelkezik az eszközvezetékkel, amely az Ön számára is elvégzi ezeket a feladatokat.

Csakúgy, mint a CodeKit speciálisan formázott megjegyzéseket, hogy tudassa vele, mi a függőség, az Asset Pipeline is:

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

Ezután összekapcsolja azt a JavaScript fájlt a sablonjaiból, például:

Ez egy nagyon szép rendszer szerintem. Néhány okból. Az egyik az, hogy a fejlesztés során a fájlok külön maradnak, ami jó a DebTools hibakereséséhez. A másik az, hogy a telepítés után a fájlok gyorsítótár-törlő karakterláncokkal rendelkeznek a fájlnevekben, ami fontos lépés, ha a távoli lejáratú fejléceket szolgálja a jó gyorsítótárazás érdekében.

Természetesen nem ez az egyetlen két lehetőség. Erre valószínűleg számtalan módszer létezik. A másik nagyon népszerű technika manapság a Grunt.

Használhatja a grunt-contrib-concat és a grunt-contrib-uglify e „feladatok” elvégzésére.

Itt van egy minta a Gruntfile.js fájlból, amely könyvtárfüggőségekkel teli mappát és egy global.js fájlt vesz fel, összefűzi és tömöríti őket egy production.min.js fájlba:

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

Ezután egyszerűen írja be a „grunt” parancsot a projekt mappájából a parancssorból. A morgás mégis divatosabbá válhat, mint azt gyaníthatod. Aminek még egy nap kell lennie!

Összeállítottam egy példa projektet (azoknak, akiknek letöltési hozzáférése van), hogy piszkálhasson, hogy lássa, hogyan működik ez a Grunt dolog. Előfeltételek:

  • Telepítse a Node-ot
  • Telepítse a Grunt-CLI-t
  • Futtassa npm installa terminálból ebben a könyvtárban

Ezután megpróbálhatja futtatni a gruntparancsot, és láthatja, hogy működik.

Fájlok

  • 29-Példa-Project.zip