Share
Questo secondo tutorial sulla costruzione di siti Web statici con Middleman si tuffa un po 'più in profondità nel framework. Alla fine, dovresti sapere abbastanza per costruire il tuo progetto da zero. Tratteremo argomenti come file di dati, URL graziosi, modelli di progetto e asset pipeline, quindi restiamo bloccati!
Quindi, avendo già seguito il primo tutorial, avrai già imparato a giocare con i dati; frontespizio memorizzato nelle sezioni delimitate da triplo trattino di singole pagine. È inoltre possibile scrivere file di dati separati in YAML o JSON e inserirli in una directory "/ data". Ciò è utile se hai siti più complessi con dati che cambiano raramente e in cui non desideri mantenere tali dati direttamente nel tuo HTML.
Diciamo che hai i diritti per vendere tutti i film di James Bond. Potremmo metterne una lista in un file di dati e iterare su di essi nella nostra vista. Se dovessimo modificare o aggiornare tali dati quando è disponibile un nuovo film, sarà necessario applicare tale modifica al proprio .YAML o .jSON file di dati. Non lo consiglierei fare quello per i dati che sono in qualche modo complessi; è fattibile, ma si sente molto incerto e sbagliato.
Ad esempio, ecco come può apparire un file /data/bond.yaml:
film rubino: - titolo: "Dr. No" anno: "1962" testo: "John Strangways, capo della stazione di intelligence britannica (SIS) in Giamaica, viene ucciso." In risposta, l'agente britannico James Bond, noto anche come 007, è inviato in Giamaica per indagare sulle circostanze Durante la sua indagine Bond incontra Quarrel, un pescatore di Cayman, che ha lavorato con Strangways intorno alle isole vicine per raccogliere campioni di minerali. Una delle isole era Crab Key, casa del solitario Dr. No. " immagine: "bond_movie_01.png" - titolo: "Dalla Russia con amore" anno: testo "1963": "L'esperto pianificatore di Spectre Kronsteen escogita un complotto per rubare un dispositivo crittografico di Lektor dai sovietici e rivenderlo a loro mentre rivendica la vendetta su Bond per aver ucciso il loro agente Dr. No, l'ex agente SMERSH Rosa Klebb è responsabile della missione, recluta Donald "Red" Grant come assassino e Tatiana Romanova, un impiegato in codice presso il consolato sovietico di Istanbul, come esca inconsapevole ". immagine: "bond_movie_02.png" - titolo: "Goldfinger" anno: "1964" testo: "A Bond viene ordinato di osservare il rivenditore di lingotti Auric Goldfinger: vede Goldfinger tradire le carte e fermarlo distragendo il suo dipendente, che viene successivamente ucciso da Il servo coreano di Goldfinger, Oddjob, viene incaricato di indagare sul contrabbando d'oro di Goldfinger e segue il commerciante in Svizzera: Bond viene catturato quando riconsegna la pianta di Goldfinger e viene drogato, viene portato nella fattoria di Goldfinger's Kentucky e viene imprigionato. testimonia l'incontro di Goldfinger con i mafiosi statunitensi, che hanno portato il materiale necessario per un'operazione per rapinare Fort Knox. " immagine: "bond_movie_03.png" ...
Quindi, invia come segue in source / bond-movies.html.erb:
"html
<%= movie.text %>
"
Uno dei vantaggi di questi file di dati è che sono sicuri. Ancora meglio, il tuo /dati la directory con tutti i dati YAML o JSON non verrà inviata al tuo server live. Durante la fase di costruzione, i tuoi dati vengono iniettati nei tuoi modelli localmente prima che vengano distribuiti. Dopodiché, i dati nelle tue visualizzazioni sono semplicemente HTML statici. Molto carino!
Una parola sulle convenzioni di denominazione qui. Quando si hanno file di dati in una directory "dati" si ottiene l'accesso a a dati oggetto. Middleman crea quindi "oggetti" per ogni .yml, .YAML o .jSON file a cui è possibile accedere tramite inital dati oggetto concatenandolo. Hai quindi accesso agli attributi che hai memorizzato. Nel nostro caso, abbiamo un film YAML "oggetto" con gli attributi titolo, anno, testo e Immagine.
"html <%= data.data_file_name.yaml_or_json_object.attribute %>
<%= data.bond.movies.image %> <%= data.bond.movies.title %> <%= data.bond.movies.year %> <%= data.bond.movies.text %>"
Se hai sottodirectory, devi solo applicarle. Supponiamo che tu abbia il tuo file di dati sui film obbligazionari sotto a spy_movies directory (ad esempio: /data/spy_movies/bond.yaml) Ora avresti accesso in questo modo:
html <%= data.spy_movies.bond.movies.title %>
Infine, devo aggiungere che la memorizzazione in JSON potrebbe essere preferibile ad alcune persone, ma tutte le virgole, parentesi e parentesi in eccesso mi escludono per essere onesti. Non solo nei file di dati, ma anche nelle sezioni di frontespizio. Certo, spetta a te ciò che più ti si addice, vedi di persona:
some_file.yaml:
bond_girls: - Strawberry Fields - Jill Masterson - Tiffany Case
some_file.json:
javascript "bond_girls": ["Strawberry Fields", "Jill Masterson", "Tiffany Case"]
Se hai un file come source / bond-movies.html.erb finirà come http://appname.com/bond-movies.html. Durante il processo di costruzione perdiamo l'estensione di file ".erb" e finiamo con la versione finale ".html" di quella pagina che è specchiata nell'URL. Va bene, roba normale. Per gli URL più elaborati come http://appname.com/bond-movies dobbiamo lavorare un po '.
È necessario attivare il Indici di directory estensione nel tuo config.rb. Questo crea una cartella per ogni file .html. Durante build di middleman la pagina finita finisce come il file di indice di quella cartella, il che significa che la sua estensione come file di indice non dovrà necessariamente apparire nell'URL. Se hai prestato attenzione, potresti aver già visto questo al lavoro con il file index.html standard che viene creato per ogni progetto Middleman come pagina di destinazione. Accendi il tuo server e guarda tu stesso.
In config.rb:
ruby activate: directory_indexes
Vediamo cosa è successo dopo build di middleman al tuo file bond-movies.html.erb se hai attivato quell'estensione. Middleman avrà creato una cartella "build / bond-movies" e il nome file originale sarà stato modificato in index.html (build / bond-movies / index.html).
Ecco l'output di Shell:
bash crea build / bond-movies / index.html
C'è però un piccolo avvertimento. Prima di attivare abbastanza URL puoi fare affidamento sull'utilizzo del percorso delle risorse. Ora con gli indici di directory sul posto è necessario fornire le risorse con il loro percorso completo e assoluto. Ad esempio, chiamare un'immagine con il suo nome, per esempio, non volerà più.
Se per qualche motivo si desidera sovrascrivere il comportamento di tale estensione per un determinato file, è possibile.
In config.rb:
pagina ruby "/bond-movies.html",: directory_index => false
Ecco l'output di Shell se lo cambi di nuovo per bond-movies.html.erb:
bash crea build / bond-movies.html rimuovi build / bond-movies / index.html rimuovi build / bond-movies
Ora il suo URL è tornato alla normalità per quel file di nuovo. (Http://appname.com/bond-movies.html)
Inoltre, è possibile disattivare lo schema di denominazione dell'indice delle directory localmente nel frontmatter delle singole pagine:
directory_index: false -
... "
Se vuoi costruire quella struttura con le cartelle e i loro rispettivi file indice, Middleman non ha intenzione di fare casino con te. Funziona allo stesso modo e l'intermediario li ignora se mescoli e abbini quell'approccio.
Mi piacerebbe andare al sodo con questo e solo mostrarti i pezzi che penso siano davvero rilevanti.
Il "pipeline di asset" è il lingotto di Rails importato in Middleman. Sotto il cofano, una gemma chiamata Pignoni fa tutto il sollevamento pesante. Ti aiuta a gestire la gestione delle dipendenze, combinando e minimizzando le risorse, il che aiuta a ridurre in modo significativo le tue risorse. Sono disponibili anche alcuni metodi di supporto per fare riferimento concisamente alle risorse. Oltre a questo, ti vengono forniti anche i mezzi per scrivere il codice Sass e CoffeeScript, appena estratto dalla confezione.
La concatenazione è una delle caratteristiche più importanti della pipeline di asset. Invece di avere molte richieste HTML separate per ogni file CSS e JS, puoi ridurle drasticamente concatenandole in una o in una manciata di file. Il minor numero di richieste causate velocizza il caricamento dell'applicazione.
Per impostazione predefinita, Sprockets consente di premere tutti i file JavaScript in un singolo .js file. Dopo build di middleman, questo file si trova in /build/javascripts/all.js. Lo stesso vale per il tuo CSS. Dopo il processo di compilazione, avrai tutti i file Sass concatenati insieme in build / stylesheets / all.css.
Combini le tue risorse JavaScript usando partial (i cui nomi di file iniziano con un trattino basso) e poi richiedere in cima al file sorgente / javascripts / all.js. I file con un'estensione .coffee aggiunta funzionano esattamente allo stesso modo. L'ordine conta per questo processo.
Qui, per esempio, è la parte superiore di source / javascript / all.js:
javascript // = richiede "_jquery" // = richiede "_lib_code" // = richiede "_animations"
Quando dai un'occhiata al tuo nuovo /costruire directory, troverai solo un file .js sotto / javascript.
Per il tuo codice Sass, la storia è fondamentalmente la stessa, ma dovresti usare Sass @importare per importare i tuoi parziali, invece di richiedere da ruote dentate. Ancora una volta, posiziona i file "richiesti" nella parte superiore, questa volta prestando attenzione all'ordine. A differenza della richiesta di partials JavaScript, si esclude il carattere di sottolineatura quando si importano i partial parziali di Sass. Per esempio
css @import 'normalize'; @import 'intestazione'; @import "navigazione"; @import 'footer';
Un'altra caratteristica interessante dei pignoni è la compressione, detta anche minificazione. Questo processo elimina gran parte del grasso, come eliminare inutili spazi bianchi e commenti. La gente chiama anche questo processo in modo egregio (e ovviamente c'è un gioiello chiamato uglifier che fa un bel lavoro di questo). Rispetto alla minimizzazione delle risorse JavaScript, l'ugrificazione dei CSS non è così complicata.
Per iniziare devi aggiungere quanto segue al tuo file config.rb:
ruby configure: build do activate: minify_css activate: minify_javascript end
In realtà, devi solo decommentare queste righe sotto la tua :costruire bloccare. La prossima volta che usi build di middleman le risorse nella cartella / build saranno tutte uguate e snelle. Di seguito sono riportati due piccoli esempi di come questo codice finisca per apparire:
CSS minificato in /build/stylesheets/all.css:
corpo css background-color: # d0e4fe h1 color: orange; text-align: center p font-family: "Times New Roman"; font-size: 20px
JS minificato in /build/javascripts/all.js:
interruttore javascript ((nuova data) .getDay ()) caso 0: giorno = "domenica"; pausa; caso 1: giorno = "lunedì"; pausa; caso 2: giorno = "martedì"; pausa; caso 3: giorno = "Mercoledì"; pausa; caso 4: giorno = "giovedì"; pausa; caso 5: giorno = "venerdì"; pausa; caso 6: giorno = "sabato"
Senza la pipeline di asset, dovresti impostare le tue cose per scrivere JavaScript e CSS tramite linguaggi di livello superiore come CoffeeScript e Sass.
Per i tuoi file Sass hai a disposizione quattro aiutanti:
Accentsconagua
percorso_immagine ()font_path ()URL dell'immagine()font_url ()Poiché hai seguito le convenzioni fino ad ora, puoi utilizzare questi helper per anteporre il percorso corretto della directory alle tue risorse.
In un file Sass, ad esempio:
"css image_path ('logo.png') # => images / logo.png
image_path ('nested_folder / some.png') # => images / nested_folder / some.png "
La pipeline degli asset utilizza i percorsi di importazione tramite Pignoni per le tue risorse. Di default : js_dir e : css_dir sono già stati aggiunti a quel percorso. Ciò significa che i file vengono inseriti / source / javascript e / source / fogli di stile sono disponibili e importati automaticamente. D'altra parte, se si dispone di risorse che si desidera conservare in altre directory, è possibile aggiungerle al percorso di importazione modificando config.rb:
ruby sprockets.append_path '/ some / other / assets_folder /'
In questo esempio, altre risorse in source / qualche / altra / assets_folder / other.css sono anche a disposizione di Middleman attraverso questo percorso. Lo stesso vale per .js file pure.
Middleman ha un paio di pratici modelli di progetto che dovresti almeno conoscere. Questi modelli ti danno un buon punto di partenza quando avvii una nuova app Middleman. Puoi anche aggiungere questi modelli in qualsiasi momento dopo:
Puoi usarli in questo modo, tramite la riga di comando:
bash middleman init your_fancy_app --template = smacss Il modello ti fornirà tutti i file e le cartelle di cui ha bisogno. Se hai già un'app e vuoi aggiungere un modello, usi lo stesso comando senza menzionare il nome della tua app. Stesso affare:
bash middleman init --template = smacss
Ora arriva la mia parte preferita di Middleman. È semplicissimo costruire i tuoi modelli e riutilizzarli quando vuoi. Inizi creando creando un ~ / .Middleman cartella nella directory principale (non dimenticare il punto davanti al nome). All'interno di questa directory crei nuove cartelle per i tuoi modelli. Per esempio /.middleman/podcast sarebbe un Podcast modello. Quindi riempire questo dirctor podcast con tutti i file e le cartelle che ti servono. Ad esempio, se desideri avere fogli di stile aggiuntivi disponibili per la tua app Middleman, devi simulare il percorso file di Middleman per renderlo super facile da usare.
Nello screenshot qui sotto ho preparato un esempio fittizio che contiene un paio di file che potrei aver bisogno per ogni progetto inserito in una cartella "bourbon". Ora ho un modello di bourbon.
Dal momento che ho simulato la struttura dei file di Middleman, questi fogli di stile verranno visualizzati esattamente dove ho bisogno di loro dopo aver avviato quel modello. I miei file ora sono sotto / source / fogli di stile e anche pronto per essere importato nel mio /source/stylesheets/all.css.scss file.
Dal momento che ho già reso i miei modelli di stile partial, è normale come al solito. Ecco la mia fonte / stylesheets / all.css.scss:
css @import 'bourbon_mixins / mixins'; @import 'bourbon_neat / grids'; @import 'bourbon_refills / cards'; ...
Finito! Una cosa dovresti fare attenzione però: quando usiamo build di middleman per creare il nostro nuovo costruire directory questi file verranno assorbiti da all.css e nessuna delle cartelle dei modelli di bourbon verrà mostrata lì. Tuttavia, se si dimentica di avere un trattino principale nei nomi dei file per questi stili, la cartella completa verrà trasferita in /costruire, insieme ai rispettivi file .css. Il @importare anche in questo caso le istruzioni in all.css.scss non faranno alcuna differenza.
Se hai un sacco di modelli e vuoi semplicemente controllare l'elenco per un nome, puoi usare il seguente comando:
"bash middleman init -help
"
Nel caso in cui desideri reinventare la ruota, dai un'occhiata a questi modelli open source. Se non hai mai giocato molto con i modelli, ti consiglio di avviare un'app fittizia e di prenderli per un giro. Guarda quali file vengono creati o sovrascritti. Batti un po '. Quindi crea una cartella fittizia con un paio di file Sass per un modello sotto ~ / .Middleman e vedi cosa succede quando avvii quel modello. Niente batte l'apprendimento facendo questi piccoli esperimenti lungo la strada!
Credo che tu sia ora più che pronto per iniziare a costruire una piccola app con Middleman. Ci sono alcune cose che devi imparare da te, ma ti ho presentato i pezzi più importanti del puzzle.
Middleman è molto divertente e una buona scelta dal punto di vista della tecnologia. È potente, facile da usare e ha un'API semplice e intuitiva per i principianti; questo è tutto ciò che conta per ora. Divertiti!
