Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Gulp.js
Webdesign

Combinando il modello Lab con Gulp per flusso di lavoro migliorato

by
Difficulty:IntermediateLength:LongLanguages:

Italian (Italiano) translation by Mirko Pizii (you can also view the original English article)

Voi e il vostro lavoro di squadra con styleguides? Avete documentazione per i moduli? In caso contrario, non fatevi prendere dal panico. In questo tutorial vi mostrerò come sia possibile migliorare il modo di che lavorare con il vostro team. Esploreremo i concetti suggeriti da Brad Frost e Dave Olsen, utilizzando Pattern Lab per creare styleguides, con Gulp per gestire le risorse. Cominciamo!

Che cosa è Gulp?

Gulp.js è un sistema di compilazione streaming e un corridore di attività. Il concetto importante è che si dispone di flussi di cui è possibile definire un sacco di roba per i file. È più veloce di gestire le cose manualmente, risparmiando i nervi e un sacco di tempo. Ad esempio, in questo tutorial metteremo tutti i nostri file Sass in una pipe (un processo):

  • compilazione Sass a CSS,
  • concatenando i file CSS,
  • minimizzando l'output,
  • e spostandolo tutto in un'altra posizione

Per ulteriori informazioni sulle nozioni di base di Gulp, check out principiante guida di Melina Bracey della riga di comando per Web Design: automazione con Gulp.

Qual è il modello Lab?

Modello Lab è un concetto per la creazione di sistemi di progettazione atomico; costruzione di moduli invece di costruire pagine direttamente. Esso definisce le diverse parti in composito:

  • atomi
  • molecole
  • organismi
  • modelli
  • pagine

Si inizia con il più piccolo elemento, edificio fuori di più grandi parti, fino a quando non si dispone di pagine intere. Questo approccio consente risparmi tempo, collaborare e garantisce una struttura solida.

Atomi

Atomi non possono essere suddiviso in pezzi più piccoli.

Questi sono i blocchi più semplici, inclusi i tag fondamentali come elenchi, colori, tipi di carattere, animazioni ecc.

Molecole

Molecole sono gruppi di diversi elementi (atomi) che funzionano insieme come un'unità.

Ad esempio, un teaser con un titolo, un'immagine, paragrafo e un link come "Leggi tutto". Ognuno di questi è un singolo elemento, ma insieme diventano una molecola; parte di un sistema più grande, più complesso.

Organismi

Gli organismi sono gruppi di elementi (atomi e molecole) e lavoro come una sezione sul tuo sito Web.

Pensare, ad esempio, un sito Web di intestazione. È un sistema più grande, costruito da molecole come un modulo di ricerca e navigazione, entrambi i quali sono a loro volta costruiti degli atomi più piccoli.

patternlab header organism
Organismo di intestazione Lab modello, visualizzato il piccolo schermo

Scopri la demo online di interfaccia utente e ottenere una sensazione per l'intero sistema.

Lasciate che la magia accade!

Ora è il momento di combinare questi due sistemi e creare un flusso di lavoro per la tua squadra. Modello Lab ci darà il nostro HTML e fornire l'interfaccia utente semplice, Gulp gestirà tutti i beni di cui che abbiamo bisogno.

Le nostre caratteristiche chiave:

  • Sass-compilazione (Libsass)
  • Server (Browser-Sync)
  • LiveReload
  • Minify (Javascript, CSS e immagini)
  • Rilascio / distribuzione
    • Lievitare la versione
    • Tagging
    • Spingere i file e tag all'endpoint
    • Inviare file tramite rsync a un server

Introduzione

Per utilizzare Gulp è necessario innanzitutto avere node. js sul vostro sistema. Se non lo fai, dai un'occhiata a Command Line per Web Design: Taming di pacchetti di terze parti di Kezz Bracey per le istruzioni di installazione.

Iniziamo installando Gulp.js a livello globale. Nel terminale, digitare:

Ora abbiamo bisogno di clonare il repository di Patternlab a darci una base al lavoro da.

Poi abbiamo bisogno di un file di gulp ai nostri compiti di installazione. Creare un gulpfile.js nella radice della cartella del progetto. Dopo di che abbiamo bisogno di un file di configurazione, dove si definiscono tutti i percorsi, quindi creare un build.config.json nella cartella.

Troppo sono necessari i seguenti file:

  • .bowerrc
  • package.json
  • bower.json

Dopo tutti questi passaggi di base, abbiamo la struttura di base del progetto. Ora iniziamo a costruire le attività per il nostro flusso di lavoro.

Iniziare con il Gulpfile

Nella parte superiore del nostro file di gulpfile.js, abbiamo bisogno di ogni dipendenza. Se si installa un plugin, è necessario "richiedono" e dargli un nome.

Inizio con gulp e nostro configfile per tutti i percorsi e la configurazione.

Durante il nostro processo di sviluppo, non dobbiamo essere la riduzione del nostro codice (che è uno spreco di tempo a meno che non siamo pronti per la distribuzione). Con la seguente variabile di produzione abbiamo possiamo attivare o disattivare alcune attività on e off. Si vedrà in azione più tardi.

Con l'installazione di cose, ora possiamo iniziare l'aggiunta di vari compiti per aiutarci nel nostro sviluppo!

Attività 1: Pulire tutti i beni

Se si elimina un'immagine dalla cartella "origine /", troverete c'è una copia dell'immagine in "public /" troppo. A causa di questa duplicazione eseguiamo un semplice passo per pulire la cartella immagini in "pubbliche /".

Attività 2: Maniglia script

Per scopi di distribuzione è importante avere un solo file con tutti gli script. Per raggiungere questo obiettivo utilizza il plugin gulp-concat e combinare tutti i nostri script per produrre application.js. Se la produzione variabile è vera, allora application.js verrà essere abbruttita e ottenere un nuovo nome: application.min.js.

Compito 3: tipi di carattere

Questa attività spingerà tutti i font nella cartella pubblica. Niente di più.

Attività 4: immagini

Per questo passaggio ci installare e richiedono il plugin gulp-imagemin. Una volta che abbiamo fatto che possiamo usarlo per minify immagini. Consente di risparmiare memoria e migliorare le prestazioni.

Se la produzione variabile è true, tutte le immagini saranno essere minified. Fatto questo, li spingiamo nella cartella di destinazione.

Attività 5: Maniglia Sass

Let's installare e richiedono le dipendenze gulp-sass e gulp-cssmin.

Ora ti portiamo tutti i file di Sass, è necessario utilizzare il plugin di Sass per compilarli a CSS, quindi se la produzione variabile è true, cssmin farà la sua cosa.

Compito 6: Modello Lab Server

Modello Lab ha un proprio server, che puoi iniziare con un semplice comando di shell. Per eseguire questo comando che ci serve il plugin gulp-shell.

A questo punto si copierà la cartella styleguide dal nucleo al pubblico. A questo punto, sarete in grado di vedere un solido front-end nel browser.

Attività 7: Start Server e file di orologio

Modello Lab ha un server incorporato, ma Browser-Sync gestisce l'iniezione delle modifiche CSS senza ricaricare la pagina.

L'osservatore si prende cura delle modifiche e innesca i compiti specifici. Dopo di che, sincronizzazione del browser aggiorna la visualizzazione nel browser.

Abbiamo specificare i file per l'osservatore e innescare i compiti che abbiamo bisogno in caso di un cambiamento.

Attività 8: Impostazione predefinita-attività

Gulp di scrittura nei trigger shell il task predefinito. Ma prima di Gulp inizia questo, si innesca il clean:before operazione pulire tutti i file pubblici.

Attività 9: Inizio processo

Creiamo un task per sviluppare presso il styleguide, ma senza la riduzione di attività. Ciò innesca la browser-sync, costruisce tutti i beni e inizia l'osservatore.

Attività 10: Rilasciando e Tagging

Per questo passaggio ci serviranno alcuni nuovi plugin.

  • Il plugin gulp-bump è di aggiornare il numero di versione.
  • Gulp-filtro ci darà un file specifico del flusso.
  • Gulp-git permette di usare git dichiarazioni in sorso.
  • E gulp-tag-versione è per la generazione del tag.

Ora si definisce il rilascio gulp-attività, impostare la variabile produzione su true (ora abbiamo bisogno di minify) e aprire il flusso. È necessario prendere tutti i file con un numero di versione, utilizzare l'urto di plugin e consentono di definire il tipo (patch, minore o maggiore) tramite un parametro in shell.

Se si esegue l'attività di rilascio senza un tipo poi gulp-urto avrà una patch - x.x.1. Dopo questo potete spingere i file alla radice e il commit delle modifiche. Ora è il momento per generare un nuovo tag per il progetto. Il file package.json è necessaria per ottenere il numero di versione per il nuovo tag.

Infine, spingiamo tutti i file e tag all'origine e nel ramo che vogliamo.

Attività 11: distribuzione

È possibile distribuire tutti i file in un server tramite rsync; fare così è super veloce e confortevole. Scrivi gulp deploy nel vostro terminale e dopo pochi secondi avete il progetto locale al server. Non è necessario trascinare e rilasciare cartelle manualmente. Automatizzare tutte le cose. Per definire l'host e il percorso della cartella che si desidera distribuire in build.config.js.

Gulpfile finale

Hai scritto codice così tanto, ed ecco il risultato finale! È preferibile avere un file separato per ogni attività, nel qual caso ti invitiamo a dividerlo. In questo caso, per motivi di semplicità, visualizziamo tutto in un unico Gulpfile:

ConfigFile

Ora abbiamo bisogno di nostro configfile per impostare i vari percorsi. Questo file è necessario mantenere i percorsi e la configurazione del progetto:

Conclusione

Mi piace lavorare con una combinazione di Gulp e modello Lab. Ho lavorato in squadre diverse e insieme questa Fondazione per ogni progetto. Feedback di ogni membro del team è sempre stato positivo a causa del suo processo facile da seguire. Tutti hanno una superficie solida, può scegliere il modulo e utilizzare con facilità. Per domande o commenti si prega di vedere sezione commenti qui sotto.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.