controllo versione: come controllare le versioni css e js compresse/minificate tra gli ambienti

Sto usando git (tramite GitHub) per il controllo della versione sui miei progetti. Sono ancora nuovo a questo, ma mi piacerebbe sapere le migliori pratiche su come mantenere i miei file css e js sincronizzati tra gli ambienti.controllo versione: come controllare le versioni css e js compresse/minificate tra gli ambienti

Esempio: Diciamo che scrivo uno script js su dev. Sono contento del mio lavoro e spingo ai test. Bene sul test vorrei una versione minified/compressa. Come potrei realizzarlo senza un sacco di compiti generali? Cosa fate ragazzi? Suppongo che faccia parte di una specie di script di distribuzione che comprime il codice e lo spinge in qualsiasi ambiente specifico.

Questo fa sorgere un'altra domanda: per quanto riguarda i miei file header (e/o footer) nel mio progetto? Se il mio dev ha:

<link rel="stylesheet" href="<?php echo base_url(); ?>css/main.css">

e la mia testing ha:

<link rel="stylesheet" href="<?php echo base_url(); ?>css/main.min.css">

Questo è tutto bene, ma cosa succede se ho bisogno di apportare modifiche al mio header? Come separerei tutte queste cose l'una dall'altra? Se apporto modifiche alla mia intestazione e spingo al testing o alla produzione, perderei lo .min da quella linea di inclusione.

Attualmente quello che faccio per distribuire gli aggiornamenti è solo un semplice git pull origin [branch] dalla riga di comando all'interno dell'ambiente che voglio aggiornare.

Ancora una volta, sto cercando le migliori pratiche, qualunque sia l'apprendimento richiesto. Grazie!

fonte

2013-03-20 Jared Eitnier

Avrei sicuramente ** non ** mantenuto la fonte minificata nel controllo della versione. Scrivi uno script di build di qualche tipo (molte opzioni), controlla quello script nel controllo di versione e usalo per minimizzare (etc) durante la distribuzione. – Pointy

Solo una fyi, avere percorsi assoluti renderebbe molto più semplice riscriverli in una fase di compilazione o di distribuzione :) Inoltre, aggiungi un hash ai nomi dei file compressi in modo da poterli memorizzare nella cache per molto tempo. –

@Pointy +1 per non mantenere i file minificati nel controllo del codice sorgente. È come mantenere i binari compilati nel controllo del codice sorgente. – Floremin

È possibile controllare gli strumenti del preprocessore, come LESS o Sass. Questi strumenti ti permettono di scrivere CSS (credo che possano essere in grado di gestire anche JS, ai fini della minimizzazione) e di impostare script che gestiscano il modo in cui compilano il codice, in base all'ambiente.

Quello che dovresti fare, quindi, è scrivere il tuo codice in file "sorgente" e configurare il preprocessore per compilare il codice in base alle impostazioni disposte in un file di impostazioni (per Sass, questo è fatto facilmente con il Compass framework), in base all'ambiente in cui ti trovi. Mantieni quindi solo i file di origine nel repository (imposta Git per ignorare le versioni compilate) e imposta i hook di post-ricezione per compilare i file di origine sul server . Il tuo HTML può quindi essere scritto per accedere ai file compilati (che dovrebbero avere lo stesso nome in tutti gli ambienti), quindi non devi scrivere la logica che determina al volo, ogni volta, in quale ambiente viene eseguito il codice.

fonte

2013-03-20 15:04:00 Shauna

Mi piace molto il suono di questo e questa è una grande notizia perché una delle cose che la lista dei progetti è di incorporare LESS o SASS, probabilmente quest'ultima dato che è più robusta. Grazie per l'articolo. –

Questo è davvero un buon suggerimento: guarda attentamente questi strumenti e scegli quello che si adatta alla tua filosofia, ma sarai davvero grato in seguito. – Pointy

In genere un file minificato viene generato dal CMS al caricamento della pagina. Quindi dal punto di vista del codice non è necessario tenere traccia della versione minificata poiché tutto il codice viene tracciato nei file js e css effettivi. Quindi le copie minificate possono essere semplicemente ignorate usando il file .gitignore.

Il mio file .gitignore si presenta in genere come:

css-min   #directory to store generated minified css files 
js-min    #directory to store generated minified js files 
tmp    #directory to store temporary files 
files/images/cache #directory for storing generated images such as thumbnails 
settings.php  #File that stores system variables.

Il file delle impostazioni viene utilizzato per impostare le variabili globali come la tua piattaforma come "dev", "messa in scena", "produzione". Quindi negli altri file è possibile controllare la piattaforma su quali file css/js utilizzare. Dal momento che quel file viene ignorato dal repository, è possibile definire le impostazioni specifiche per ciascuna piattaforma.

if ($GLOBAL['platform'] = PLATFORM_DEV) { 
    $path = 'css/main.css'; 
} 
elseif ($GLOBAL['platform'] = PLATFORM_STAGE) { 
    $path = 'css-min/main.min.css'; 
} 

<link rel="stylesheet" href="<?php print base_url(); print $path; ?>">

fonte

2013-03-20 15:06:51 danielson317

Non mettere la versione minified di CSS, JS in controllo di versione. Questo è duplicato.
Git può essere utilizzato su Delopy ma il suo scopo non è distribuire.
Per i tag CSS compresi, è facile. Una rapida carrellata è l'uso del tuo framework env vairable. Come so che CodeIgniter ha questa funzione. Se env == test, includere la versione minificata, in caso contrario, includere le versioni non elaborate.

Inoltre è necessario uno script di build o plug-quadro per generare automaticamente le versioni minified.

fonte

2013-03-20 15:07:45

controllo versione: come controllare le versioni css e js compresse/minificate tra gli ambienti

risposta

Problemi correlati