# 29: Pregătirea producției - CSS-Tricks

O vom aduce înapoi la un editor de text normal în acest screencast, exact așa cum am început. Într-o situație de „lume reală”, aceste lucruri sunt adevărate:

Doriți să vă împărțiți JavaScript-ul în câte fișiere mici, pe cât are sens pentru dvs. La fel cum am divizat codul JavaScript în mici funcții ușor de înțeles, putem face același lucru cu fișierele. Amintiți-vă var Movies = ( );Acel obiect ar fi probabil propriul fișier.
Acele fișiere mai mici ar trebui să fie concatenate (combinate împreună într-un singur fișier) și comprimate (rulate printr-un sistem de minificare pentru a elimina spațiul alb și chiar pentru a rescrie variabile și astfel pentru a reduce dimensiunea fișierului final).

Sarcinile de concatenare și compresie sunt atât de obișnuite încât, indiferent de fluxul de lucru, există probabil un instrument care să se potrivească.

CodeKit este un software Mac care vă poate ajuta.

Aveți CodeKit să urmărească întregul folder al proiectului. Acesta va găsi fișiere JavaScript în interiorul său (fișiere care se termină în .js sau chiar .coffee dacă preferați să scrieți în CoffeeScript). Sub fila Scripturi, le va lista pe toate. Puteți face clic pe unul dintre ele și apoi alege opțiuni pentru ce să faceți atunci când acel fișier este modificat și salvat (de către orice editor de text).

În captura de ecran de mai sus, puteți vedea în CSS-Tricks în sine. Am un global.jsfișier care importă o serie de alte fișiere (dependențe). Când acel fișier este schimbat / salvat, acesta este verificat prin JS Hint, dependențele sunt adăugate sau adăugate după cum se specifică, apoi fișierul final este creat ( global-ck.js) și minimizat. Destul de la moda!

Puteți gestiona aceste dependențe chiar prin interfața de utilizare CodeKit, dar probabil este mai bine să o faceți prin comentarii de cod chiar în fișierul 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"

Apoi, veți conecta -ck.jsversiunea JavaScript în HTML.

Ce se întâmplă dacă nu sunteți pe Mac? Puteți căuta Google pentru alternative. Aș lega câteva aici, dar acea lume se schimbă mereu. Știu sigur că există unele care copiază în mod esențial aspectul și funcționalitatea CodeKit, dar funcționează pe mai multe browsere și sunt open source.

Să presupunem că proiectul tău este Ruby on Rails. Rails are Asset Pipeline care îndeplinește această sarcină și pentru dvs.

La fel cum CodeKit are comentarii formatate special pentru a-i informa despre dependențe, face și Asset Pipeline:

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

Apoi conectați acel fișier JavaScript din șabloanele dvs., cum ar fi:

Cred că este un sistem destul de frumos. Din câteva motive. Unul este că în curs de dezvoltare fișierele vor rămâne separate, ceea ce este plăcut pentru depanare în DevTools. Un alt lucru este că, după implementare, fișierele vor avea șiruri de memorare a cache-ului în numele fișierelor, ceea ce este un pas important dacă serviți expirarea anteturilor pentru o bună stocare în cache.

Acestea nu sunt singurele două opțiuni, desigur. Probabil că există nenumărate modalități de a face acest lucru. O altă tehnică foarte populară în aceste zile este Grunt.

Puteți utiliza grunt-contrib-concat și grunt-contrib-uglify pentru a face aceste „sarcini”.

Iată un exemplu de Gruntfile.js care ar lua un folder plin de dependențe de bibliotecă și un fișier global.js și le va concatina și le va micșora într-un fișier 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')); );

Apoi, pur și simplu tastați „grunt” din linia de comandă din folderul proiectului dvs. va face acest lucru pentru dvs. Grunt poate deveni mult mai elegant, așa cum ați putea suspecta. Care va trebui să fie o altă zi!

Am realizat un exemplu de proiect (pentru aceia dintre voi care au acces la descărcare), astfel încât să puteți să vă uitați cum să funcționeze acest lucru Grunt. Condițiile preliminare: