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:
- 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. - 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.js
fá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.js
a 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 install
a terminálból ebben a könyvtárban
Ezután megpróbálhatja futtatni a grunt
parancsot, és láthatja, hogy működik.
Fájlok
- 29-Példa-Project.zip