Share
Tu e il tuo team lavorate con gli styleguides? Hai documentazione per i tuoi moduli? In caso contrario, non fatevi prendere dal panico. In questo tutorial ti mostrerò come è possibile migliorare il modo in cui lavori con il tuo team. Esploreremo i concetti suggeriti da Brad Frost e Dave Olsen, utilizzando Pattern Lab per creare styleguides, con Gulp per gestire le risorse. Cominciamo!
Gulp.js è un sistema di generazione di streaming e un runner di attività. Il concetto importante è che hai flussi in cui definisci molte cose per i tuoi file. È più veloce che gestire le cose manualmente, risparmiando i nervi e molto tempo. Ad esempio, in questo tutorial metteremo tutti i nostri file Sass in a tubo (un processo):
Per saperne di più sulle basi di Gulp, dai un'occhiata alla guida per principianti di Kezz Bracey The Command Line per Web Design: Automation with Gulp.
Pattern Lab è un concetto per la creazione atomico sistemi di progettazione; costruire moduli invece di costruire pagine direttamente. Definisce diverse parti composite:
Si inizia con l'elemento più piccolo, la costruzione di parti più grandi, fino a quando non si dispone di pagine complete. Questo approccio ti aiuta a risparmiare tempo, a collaborare e a garantire una struttura solida.
Gli atomi non possono essere scomposti in pezzi più piccoli.
Questi sono i blocchi più semplici, inclusi tag fondamentali come elenchi, colori, caratteri, animazioni ecc.
Le molecole sono gruppi di elementi diversi (atomi) che funzionano insieme come un'unità.
Ad esempio, un teaser con un titolo, un'immagine, un paragrafo e un link come "Leggi altro". Ognuno di questi è un singolo elemento, ma insieme diventano una molecola; parte di un sistema più grande e più complesso.
Gli organismi sono gruppi di elementi (atomi e molecole) e funzionano come una sezione sul tuo sito web.
Pensa, ad esempio, all'intestazione di un sito web. È un sistema più grande, costruito da molecole come una forma di ricerca e la navigazione, entrambe a loro volta costruite con atomi più piccoli.
Organismo di intestazione di Pattern Lab, visto sul piccolo schermoGuarda le demo dell'interfaccia utente online e scopri l'intero sistema.
Ora è il momento di combinare entrambi questi sistemi e creare un flusso di lavoro per il tuo team. Pattern Lab ci fornirà il nostro codice HTML e fornirà la semplice interfaccia utente, Gulp gestirà tutte le risorse di cui abbiamo bisogno.
Per utilizzare Gulp devi prima avere node.js sul tuo sistema. Se non lo fai, dai un'occhiata a Command Line Web di Kezz Bracey: Taming di pacchetti di terze parti per le istruzioni di installazione.
Iniziamo installando Gulp.js a livello globale. Nel terminale, digitare:
npm install gulp -g
Ora abbiamo bisogno di clonare il repository di Patternlab per darci una base su cui lavorare.
git clone [email protected]: pattern-lab / patternlab-php.git
Successivamente abbiamo bisogno di un file gulp per configurare i nostri compiti. Creare un gulpfile.js nella radice della cartella del progetto. Dopo ciò abbiamo bisogno di un file di configurazione, dove definiamo tutti i percorsi, quindi crea un build.config.json nella tua cartella.
Sono necessari anche i seguenti file:
Accentsconagua
.bowerrcpackage.jsonbower.jsonDopo tutti questi passaggi di base, abbiamo la struttura di base del progetto. Ora iniziamo a costruire le attività per il nostro flusso di lavoro.
Nella parte superiore del nostro file gulpfile.js, richiediamo ogni dipendenza. Se installi un plugin, devi "richiederlo" e dargli un nome.
Inizia con gulp e il nostro file di configurazione per tutti i percorsi e la configurazione.
var gulp = require ('gulp'), config = require ('./ build.config.json');Durante il nostro processo di sviluppo non avremo bisogno di minimizzare il nostro codice (è uno spreco di tempo a meno che non siamo pronti per la distribuzione). Con il seguente produzione variabile possiamo attivare e disattivare alcune attività. Lo vedrai in azione più tardi.
// Gestione della produzione // Descrizione: Usa la variabile 'produzione' con 'gulpif' // Attiva / disattiva la minifizzazione e l'ottimizzazione per la produzione delle risorse var;
Con la configurazione delle cose, ora possiamo iniziare ad aggiungere varie attività per aiutarci nel nostro sviluppo!
// Installa la dipendenza necessaria npm install gulp-clean // Richiede dipendenza var clean = require ('gulp-clean');Se elimini un'immagine dalla cartella "source /", troverai una copia dell'immagine anche in "public /". A causa di questa duplicazione eseguiremo un semplice passaggio per pulire la cartella delle immagini in "public /".
// Task: Clean: before // Descrizione: Rimozione dei file delle risorse prima di eseguire altre attività gulp.task ('clean: before', function () return gulp.src (config.assets.dest) .pipe (clean (force : vero )) );// Installa le dipendenze necessarie npm install gulp-concat gulp-uglify gulp-rename // Richiede dipendenze var concat = require ('gulp-concat'); var uglify = require ('gulp-uglify'); var rename = require ('gulp-rename');Ai fini della distribuzione è importante avere un solo file con tutti gli script. Per ottenere questo useremo il plugin gulp-concat e combinare tutti i nostri script per produrre application.js. Se la variabile produzione è vero, allora application.js sarà uglified e ottieni un nuovo nome: application.min.js.
gulp.task ('scripts', function () return gulp.src (config.scripts.files) .pipe (concat ('application.js')) .pipe (gulpif (production, uglify ())) .pipe ( gulpif (produzione, rinomina (suffisso: '.min'))) .pipe (gulp.dest (config.scripts.dest)) .pipe (browserSync.reload (stream: true)););Questa attività sposterà tutti i tipi di carattere nella cartella pubblica. Niente di più.
// Task: Handle fonts gulp.task ('fonts', function () return gulp.src (config.fonts.files) .pipe (gulp.dest (config.fonts.dest)) .pipe (browserSync.reload ( stream: true)););Per questo passaggio installeremo e richiederemo il plugin gulp-imagemin. Una volta che lo abbiamo fatto, possiamo usarlo per minimizzare le immagini. Ciò consentirà di risparmiare memoria e migliorare le prestazioni.
// Installa imagemin npm install gulp-imagemin // Richiede dipendenze var imagemin = require ('gulp-imagemin');Se la variabile produzione è vero, quindi tutte le immagini saranno miniate. Fatto ciò, li trasferiamo nella cartella di destinazione.
// Task: Gestisci le immagini gulp.task ('images', function () return gulp.src (config.images.files) .pipe (gulpif (production, imagemin ())) .pipe (gulp.dest (config. images.dest)) .pipe (browserSync.reload (stream: true)););Installiamo e richiediamo le dipendenze gulp-sass e gulp-cssmin.
// Installa le dipendenze necessarie npm install gulp-sass gulp-cssmin // Richiede dipendenze var sass = require ('gulp-sass'); var cssmin = require ('gulp-cssmin');Ora prenderemo tutti i file Sass, useremo il plugin Sass per compilarli in CSS, quindi se la variabile produzione è vero, cssmin farà la sua parte.
// Task: Gestisci Sass e CSS gulp.task ('sass', function () return gulp.src (config.scss.files) .pipe (sass ()) .pipe (gulpif (production, cssmin ())) .pipe (gulpif (produzione, rinomina (suffisso: '.min'))) .pipe (gulp.dest (config.scss.dest)) .pipe (browserSync.reload (stream: true)); );Pattern Lab ha il proprio server, che può essere avviato con un semplice comando shell. Per eseguire questo comando abbiamo bisogno del plugin sorso-shell.
// Installa le dipendenze necessarie npm install gulp-shell // Richiede dipendenze var shell = require ('gulp-shell');A questo punto copieremo la cartella styleguide da core a pubblico. A questo punto, sarai in grado di vedere un solido front-end nel browser.
// Task: patternlab // Descrizione: Crea file Pattern Lab statici tramite script PHP gulp.task ('patternlab', function () return gulp.src (", read: false) .pipe (shell (['php core / builder.php -gpn '])) .pipe (browserSync.reload (stream: true));); // Task: styleguide // Descrizione: Copia Styleguide-Folder dal core / al public gulp.task ('styleguide', function () return gulp.src (config.patternlab.styleguide.files) .pipe (gulp.dest (config.patternlab.styleguide.dest)););Pattern Lab ha un server integrato, ma Browser-Sync gestisce l'iniezione delle modifiche CSS senza ricaricare la pagina.
// Installa le dipendenze necessarie npm installa browser-sync gulp-watch // Richiede dipendenze var browser-sync = require ('browser-sync'); var watch = require ('gulp-watch');L'osservatore si prende cura delle modifiche e attiva le attività specifiche. Successivamente, la sincronizzazione del browser aggiorna la nostra vista nel browser.
// task: BrowserSync // Descrizione: Esegui il server BrowserSync con la modalità ghost disabilitata gulp.task ('browser-sync', function () browserSync (server: baseDir: config.root, ghostMode: true, open: " esterno "););Specifichiamo i file per l'osservatore e attiviamo le attività di cui abbiamo bisogno in caso di cambiamento.
// Attività: guarda i file gulp.task ('watch', function () // Guarda i file Pattern Lab gulp.watch (config.patternlab.files, ['patternlab']); // Guarda gli script gulp.watch (config .scripts.files, ['scripts']); // Guarda le immagini gulp.watch (config.images.files, ['images']); // Guarda Sass gulp.watch (config.scss.files, ['sass ']); // Guarda i caratteri gulp.watch (config.fonts.files, [' fonts ']););scrittura sorso nella shell attiva l'attività predefinita. Ma prima che Gulp inizi questo, fa scattare il Pulizia: prima compito di pulire tutti i file pubblici.
// Task: Default // Descrizione: Crea tutte le cose del progetto una volta gulp.task ('default', ['clean: before'], function () production = false; gulp.start ('patternlab', 'styleguide ',' fonts ',' sass ',' images ',' scripts '););Creiamo un'attività da sviluppare alla styleguide, ma senza risorse minifying. Questo si innesca browser sync, costruisce tutti i beni e avvia l'osservatore.
// Task: avvia il tuo processo di produzione // Descrizione: Typ 'gulp' nel terminale gulp.task ('serve', function () production = false; gulp.start ('browser-sync', 'default', 'orologio' ); );Per questo passo avremo bisogno di alcuni nuovi plugin.
// Installa le dipendenze necessarie npm install gulp-bump gulp-filter gulp-git gulp-tag-version // Richiede dipendenze var bump = require ('gulp-bump'); var filter = require ('gulp-filter'); var git = require ('gulp-git'); var tagversion = require ('gulp-tag-version');Ora definisci il gulp-task pubblicazione, imposta la produzione variabile su vero (ora dobbiamo ridurre) e aprire lo stream. È necessario prendere tutti i file con un numero di versione, utilizzare l'estensione del plugin e rendere possibile la definizione del tipo (patch, minore o maggiore) tramite un parametro nella shell.
Se esegui il pubblicazione-compito senza un tipo allora sorso-urto prenderà una patch - x.x.1. Dopodiché, si spinge i file nella root e si confermano le modifiche. Ora è il momento di generare un nuovo tag per il progetto. Il file package.json è necessario per ottenere il numero di versione corrente per il nuovo tag.
Infine, spingiamo tutti i file e i tag all'origine e nel ramo che vogliamo.
// Funzione: Rilascio (Bump & Tagging) // Descrizione: Versioni di Bump npm, crea tag Git e invia all'origine gulp.task ('release', function () production = true; return gulp.src (config.versioning. files) .pipe (bump (type: gulp.env.type || 'patch')) .pipe (gulp.dest ('./')) .pipe (git.commit ('Rilascia un' + gulp. env.type + '-update')) // leggi solo un file per ottenere il numero di versione .pipe (filter ('package.json')) // Tag it .pipe (tagversion ()) // Pubblica file e tag in endpoint .pipe (shell (['git push origin develop', 'git push origin --tags'])););È possibile distribuire tutti i file su un server tramite rsync; farlo è super veloce e confortevole. genere gulp deploy nel tuo terminale e dopo pochi secondi hai il progetto locale sul server. Non è necessario trascinare e rilasciare le cartelle manualmente. Automatizza tutte le cose. Si definisce l'host e il percorso della cartella in cui si desidera distribuire build.config.js.
// Attività: distribuzione del contenuto statico // Descrizione: distribuzione del contenuto statico mediante il comando della shell rsync gulp.task ('deploy', function () return gulp.src (config.deployment.local.path, read: false). pipe (shell (['rsync' + config.deployment.rsync.options + "+ config.deployment.local.path + '/' + config.deployment.remote.host])));Hai scritto tanto codice, ed ecco il risultato finale! Potresti preferire un file separato per ogni attività, nel qual caso sei libero di dividerlo. In questo caso, per semplicità, mostreremo tutto in un singolo Gulpfile:
var gulp = require ('gulp'), bump = require ('gulp-bump'), clean = require ('gulp-clean'), concat = require ('gulp-concat'), browserSync = require ('browser- sync '), cssmin = require (' gulp-cssmin '), filter = require (' gulp-filter '), git = require (' gulp-git '), gulpif = require (' gulp-if '), imagemin = require ('gulp-imagemin'), rename = require ('gulp-rename'), sass = require ('gulp-sass'), shell = require ('gulp-shell'), tagversion = require ('gulp-tag -version '), uglify = require (' gulp-uglify '), config = require (' ./ build.config.json '); // Attiva la produzione var; // Task: Clean: before // Descrizione: Rimozione dei file delle risorse prima di eseguire altre attività gulp.task ('clean: before', function () return gulp.src (config.assets.dest) .pipe (clean (force : vero )) ); // Task: gestisce gli script gulp.task ('scripts', function () return gulp.src (config.scripts.files) .pipe (concat ('application.js')) .pipe (gulpif (produzione, uglify ( ))) .pipe (gulpif (produzione, rinomina (suffisso: '.min'))) .pipe (gulp.dest (config.scripts.dest)) .pipe (browserSync.reload (stream: true) );); // Task: Handle fonts gulp.task ('fonts', function () return gulp.src (config.fonts.files) .pipe (gulp.dest (config.fonts.dest)) .pipe (browserSync.reload ( stream: true));); // Task: Gestisci le immagini gulp.task ('images', function () return gulp.src (config.images.files) .pipe (gulpif (production, imagemin ())) .pipe (gulp.dest (config. images.dest)) .pipe (browserSync.reload (stream: true));); // Task: Gestisci Sass e CSS gulp.task ('sass', function () return gulp.src (config.scss.files) .pipe (sass ()) .pipe (gulpif (production, cssmin ())) .pipe (gulpif (produzione, rinomina (suffisso: '.min'))) .pipe (gulp.dest (config.scss.dest)) .pipe (browserSync.reload (stream: true)); ); // Task: patternlab // Descrizione: Crea file Pattern Lab statici tramite script PHP gulp.task ('patternlab', function () return gulp.src (", read: false) .pipe (shell (['php core / builder.php -gpn '])) .pipe (browserSync.reload (stream: true));); // Task: styleguide // Descrizione: Copia Styleguide-Folder dal core / al public gulp.task ('styleguide', function () return gulp.src (config.patternlab.styleguide.files) .pipe (gulp.dest (config.patternlab.styleguide.dest));); // task: BrowserSync // Descrizione : Esegui il server BrowserSync con la modalità fantasma disabilitata gulp.task ('browser-sync', function () browserSync (server: baseDir: config.root, ghostMode: true, open: "external");); // Attività: guarda i file gulp.task ('watch', function () // Guarda i file Pattern Lab gulp.watch (config.patternlab.files, ['patternlab']); // Guarda gli script gulp.watch (config .scripts.files, ['scripts']); // Guarda le immagini gulp.watch (config.images.files, ['images']); // Guarda Sass gulp.watch (config.scss.files, ['sa ss ']); // Guarda i caratteri gulp.watch (config.fonts.files, ['fonts']); ); // Task: Default // Descrizione: Crea tutte le cose del progetto una volta gulp.task ('default', ['clean: before'], function () production = false; gulp.start ('patternlab', 'styleguide ',' fonts ',' sass ',' images ',' scripts ');); // Task: avvia il tuo processo di produzione // Descrizione: Typ 'gulp' nel terminale gulp.task ('serve', function () production = false; gulp.start ('browser-sync', 'default', 'orologio' ); ); // Attività: distribuzione del contenuto statico // Descrizione: distribuzione del contenuto statico mediante il comando della shell rsync gulp.task ('deploy', function () return gulp.src (config.deployment.local.path, read: false). pipe (shell (['rsync' + config.deployment.rsync.options + "+ config.deployment.local.path + '/' + config.deployment.remote.host]))); // Funzione: Rilascio ( Bump & Tagging) // Descrizione: Versioni di Bump npm, crea tag Git e invia all'origine gulp.task ('release', function () production = true; return gulp.src (config.versioning.files) .pipe (bump (type: gulp.env.type || 'patch')) .pipe (gulp.dest ('./')) .pipe (git.commit ('Rilascia un' + gulp.env.type + '- update ')) // legge solo un file per ottenere il numero di versione .pipe (filter (' package.json ')) // Tag it .pipe (tagversion ()) // Pubblica file e tag in endpoint .pipe (shell ( ['git push origin develop', 'git push origin - tag'])););Ora abbiamo bisogno del nostro configfile per impostare i vari percorsi. Questo file è necessario per mantenere i percorsi e la configurazione del progetto:
"root": "./public", "deployment": "local": "percorso": "pubblico", "remoto": "host": "IL TUO HOST", "rsync": "options": "-avzh --delete -e ssh", "assets": "base": "source / assets /", "dest": "public / assets /", "versioning": "file": ["./package.json", "./bower.json"], "script": "base": "origine / risorse / javascripts /", "file": ["origine / risorse /javascripts/**/*.js "]," dest ":" public / assets / javascripts / "," components ": " base ":" source / assets / components / "," scss ": "base": "fonte / risorse / scss /", "file": ["fonte / risorse / scss / ** / *. scss"], "destinazione": "pubblico / risorse / stylesheets /", "caratteri ": " base ":" source / assets / fonts / "," files ": [" source / assets / fonts / ** / * "]," dest ":" public / assets / fonts / "," images ": " base ":" origine / risorse / immagini / "," file ": [" origine / risorse / immagini / ** / * "]," destinazione ":" pubblico / risorse / immagini / ", "patternlab": "styleguide": "files": ["core / styleguide / **"], "dest": "public / styleguide /", "files": ["source / _patterns / ** / *.baffi", "source / _patterns / ** / *. json", "source / _data / *. json"]
Mi piace lavorare con una combinazione di Gulp e Pattern Lab. Ho lavorato in diversi team e ho creato questa base per ogni progetto. Il feedback di ogni membro del team è sempre stato positivo a causa del suo processo facile da seguire. Ognuno ha una superficie solida, può scegliere il modulo e usarlo con facilità. Per domande o commenti si prega di consultare la sezione commenti qui sotto.
