# 29: Προετοιμασία της παραγωγής - CSS-Κόλπα

Anonim

Θα το επαναφέρουμε σε έναν κανονικό επεξεργαστή κειμένου σε αυτό το σενάριο, ακριβώς όπως ξεκινήσαμε. Σε μια κατάσταση «πραγματικού κόσμου», αυτά τα πράγματα είναι αλήθεια:

  1. Θέλετε να χωρίσετε τη JavaScript σας σε τόσα μικρά αρχεία όσο σας έχει νόημα. Ακριβώς όπως χωρίσαμε τον κώδικα JavaScript σε μικρές κατανοητές λειτουργίες, μπορούμε να κάνουμε το ίδιο με αρχεία. Θυμηθείτε ότι Movies = ( );αυτό το αντικείμενο θα ήταν πιθανότατα το δικό του αρχείο.
  2. Αυτά τα μικρότερα αρχεία θα πρέπει να συνδυαστούν (να συνδυαστούν σε ένα αρχείο) και να συμπιεστούν (εκτελέστηκαν μέσω ενός συστήματος ελαχιστοποίησης για να αφαιρέσετε το κενό διάστημα και ακόμη και να ξαναγράψετε μεταβλητές και τέτοια ώστε να μειώσετε το τελικό μέγεθος του αρχείου)

Οι εργασίες συνένωσης και συμπίεσης είναι τόσο κοινές που δεν έχει σημασία ποια είναι η ροή εργασίας σας, υπάρχει πιθανώς ένα εργαλείο που θα ταιριάζει.

Το CodeKit είναι λογισμικό Mac που μπορεί να βοηθήσει σε αυτό.

Έχετε το CodeKit να παρακολουθεί ολόκληρο το φάκελο του έργου σας. Θα βρει αρχεία JavaScript μέσα σε αυτό (αρχεία που τελειώνουν σε .js ή ακόμα και .coffee εάν προτιμάτε να γράφετε σε CoffeeScript). Στην καρτέλα Σενάρια, θα εμφανιστούν όλα. Μπορείτε να κάνετε κλικ σε ένα από αυτά και, στη συνέχεια, να επιλέξετε επιλογές για το τι πρέπει να κάνετε όταν το αρχείο αλλάξει και αποθηκευτεί (από οποιοδήποτε πρόγραμμα επεξεργασίας κειμένου).

Στο παραπάνω στιγμιότυπο οθόνης, μπορείτε να δείτε στο CSS-Tricks ότι έχω ένα global.jsαρχείο που εισάγει έναν αριθμό άλλων αρχείων (εξαρτήσεις). Όταν αυτό το αρχείο αλλάξει / αποθηκευτεί, ελέγχεται μέσω JS Hint, οι εξαρτήσεις προσαρτώνται ή προπληρώνονται όπως καθορίζεται, τότε το τελικό αρχείο δημιουργείται ( global-ck.js) και ελαχιστοποιείται. Πολύ ωραίο!

Μπορείτε να διαχειριστείτε αυτές τις εξαρτήσεις μέσω του CodeKit UI, αλλά μάλλον είναι καλύτερο να το κάνετε μέσω κωδικών σχολίων απευθείας στο ίδιο το αρχείο JS:

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

Στη συνέχεια, θα συνδέσετε την -ck.jsέκδοση του JavaScript στο HTML.

Τι γίνεται αν δεν είστε σε Mac; Μπορείτε να κάνετε Google για εναλλακτικές λύσεις. Θα συνδέσω μερικά εδώ, αλλά αυτός ο κόσμος αλλάζει συνεχώς. Γνωρίζω σίγουρα ότι υπάρχουν μερικά που αντιγράφουν ουσιαστικά την εμφάνιση και τη λειτουργικότητα του CodeKit, αλλά λειτουργούν μεταξύ προγραμμάτων περιήγησης και είναι ανοιχτού κώδικα.

Ας υποθέσουμε ότι το έργο σας είναι Ruby on Rails. Το Rails διαθέτει το Asset Pipeline που κάνει αυτό το καθήκον και για εσάς.

Ακριβώς όπως το CodeKit έχει ειδικά διαμορφωμένα σχόλια για να το γνωρίζει ποιες είναι οι εξαρτήσεις, το Asset Pipeline κάνει επίσης:

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

Στη συνέχεια συνδέετε αυτό το αρχείο JavaScript από τα πρότυπά σας όπως:

Νομίζω ότι είναι ένα πολύ ωραίο σύστημα. Για μερικούς λόγους. Το ένα είναι ότι κατά την ανάπτυξη τα αρχεία θα παραμείνουν ξεχωριστά, κάτι που είναι καλό για τον εντοπισμό σφαλμάτων στα DevTools. Ένα άλλο είναι ότι μετά την ανάπτυξη τα αρχεία θα έχουν συμβολοσειρές αποθήκευσης κρυφής μνήμης στα ονόματα αρχείων, το οποίο είναι ένα σημαντικό βήμα εάν εξυπηρετείτε κεφαλίδες λήξης μακράς διάρκειας για καλή προσωρινή αποθήκευση.

Φυσικά, αυτές οι δύο επιλογές δεν είναι οι μόνες. Υπάρχουν πιθανώς αμέτρητοι τρόποι για να το κάνετε αυτό. Μια άλλη πολύ δημοφιλής τεχνική αυτές τις μέρες είναι το Grunt.

Θα μπορούσατε να χρησιμοποιήσετε το grunt-contrib-concat και το grunt-contrib-uglify για να κάνετε αυτές τις «εργασίες».

Ακολουθεί ένα δείγμα Gruntfile.js που θα παίρνει ένα φάκελο γεμάτο εξαρτήσεις βιβλιοθήκης και ένα αρχείο global.js και θα συνενώνει και θα τα ελαχιστοποιεί σε ένα αρχείο 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')); );

Στη συνέχεια, απλά πληκτρολογώντας "grunt" από τη γραμμή εντολών από το φάκελο του έργου σας θα το κάνετε αυτό για εσάς. Ο Γκριντ μπορεί να γίνει πολύ πιο φανταχτερός, όπως ίσως υποψιάζεστε. Ποια θα πρέπει να είναι άλλη μια μέρα!

Έχω δημιουργήσει ένα παράδειγμα έργου (για όσους από εσάς έχετε πρόσβαση λήψης), ώστε να μπορείτε να σκεφτείτε για να δείτε πώς λειτουργεί αυτό το Grunt. Οι προϋποθέσεις:

  • Έχετε εγκατεστημένο τον κόμβο
  • Έχετε εγκαταστήσει το Grunt-CLI
  • Εκτελέστε npm installαπό το τερματικό σε αυτόν τον κατάλογο

Στη συνέχεια, μπορείτε να δοκιμάσετε να εκτελέσετε την gruntεντολή και να τη δείτε να λειτουργεί.

Αρχεία

  • 29- Παράδειγμα-Project.zip