Share
Una cosa è certa: i tempi sono sicuramente cambiati. Non molto tempo fa, lo sviluppo front-end, sebbene non semplice, era gestibile. Impara l'HTML, un po 'di CSS e sei sulla buona strada. In questi giorni, tuttavia, per mancanza di parole migliori, ci sono molte più variabili da manipolare.
I preprocessori, l'ottimizzazione delle prestazioni, i test, l'ottimizzazione delle immagini e la minificazione rappresentano solo alcuni dei fattori chiave che lo sviluppatore front-end moderno deve tenere a mente.
Ad esempio, sebbene sia facile da usare, i CSS di certo non si adattano bene. E, sebbene potente, JavaScript può, a volte, essere un linguaggio brutto e difficile con cui lavorare. Poi c'è l'aspetto della performance; non stiamo più semplicemente progettando per Internet Explorer e Firefox. No, oggigiorno abbiamo una miriade di browser, dispositivi, risoluzioni e velocità di connessione da considerare quando si sviluppano nuove applicazioni.
Dire che la nostra è un'industria incredibilmente dura sarebbe l'eufemismo del secolo.
Il lato positivo è che, per ogni blocco stradale, sono state certamente fornite soluzioni.
Il lato positivo è che, per ogni blocco stradale, le soluzioni sono state certamente fornite dai membri della comunità. Considera il problema del ridimensionamento dei CSS; beh, i preprocessori, come Sass, Less e Stylus sono stati introdotti per rendere drasticamente più facile la nostra vita. E il brutto problema di prefisso al browser CSS3? Compass si prende cura di questo! E il dilemma JavaScript? Ancora una volta, CoffeeScript e, ora, TypeScript in soccorso! L'unico problema è che ogni nuova soluzione richiede il proprio sistema e processo. Come ci si potrebbe aspettare, nel tempo, questo può complicare in modo significativo il flusso di lavoro. Ora, abbiamo più schede Terminale aperte, ognuna delle quali monitora un sottoinsieme dei file all'interno dei nostri progetti, ascoltando le modifiche. E questa è solo la punta dell'iceberg. Non abbiamo ancora toccato il flusso di lavoro, la codifica delle best practice, l'ottimizzazione delle immagini, i test e lo sviluppo di un processo di compilazione automatizzato. Anche scrivere su tutti questi passaggi mi sta riducendo il respiro! Non sarebbe fantastico se qualcuno avvolgesse tutti questi preprocessori e le migliori pratiche in un unico pacchetto facile da usare?
Creato da alcune persone amichevoli di Google (tra cui Paul Irish e Addy Osmani), Yeoman è la soluzione ai tuoi problemi. Come dice il core team, Yeoman offre un flusso di lavoro ponderato per iniziare e iniziare a lavorare con nuovi progetti il più rapidamente possibile. Ma cosa significa veramente? Bene, offre la possibilità di impalcettare nuovi progetti, nonché i quadri necessari e gli strumenti di test. Ciò che questo essenzialmente si traduce in è una configurazione meno noiosa e più creazione.
Per iniziare con Yeoman, dobbiamo prima installarlo dalla riga di comando. Esegui il seguente comando:
curl -L get.yeoman.io | bash
Questo script eseguirà molte cose, inclusa l'installazione delle librerie necessarie per Yeoman per fare il suo lavoro. Probabilmente scoprirai che richiede una serie di passaggi da parte tua, ma non preoccuparti; ti dirà esattamente cosa deve essere fatto!
Una volta completata l'installazione, esegui piccolo terriero per vedere cosa è disponibile. Troverete una varietà di opzioni, come ad esempio dentro, per inizializzare un nuovo progetto, costruire, per creare uno speciale, ottimizzato dist cartella per la distribuzione, e installare, che rende il processo di gestione della gestione dei pacchetti il più semplice possibile.
Per saperne di più su ciascuna opzione, aggiungere
--Aiutoal comando:yeoman init --help.
Creiamo un nuovo progetto con Yeoman. Crea una nuova directory sul desktop, CD ad esso dal Terminale ed esegui:
yeoman init
A questo punto, ti verrà chiesto con una manciata di domande.
Queste domande ti danno la possibilità di configurare il tuo nuovo progetto immediatamente. Per ora, scegli "No" per ogni domanda.
Se preferisci evitare queste domande in futuro, esegui invece
yeoman init quickstart. Questo preparerà una nuova applicazione, con Modernizr, jQuery e HTML5 Boilerplate cotti in.
Con questo singolo comando da solo, Yeoman istallerà istantaneamente un nuovo progetto per te. Non essere sopraffatto da tutti questi file, però; se non fossero stati generati per te, alla fine li avresti creati manualmente. Pensa a Yeoman come al robot d'aiuto, che fa tutto il lavoro manuale per te.
"Ehi amico; vai a prendermi jQuery e Modernizr! "
Ora che abbiamo un nuovo progetto, lanciamo un server di anteprima e iniziamo a monitorare l'applicazione per le modifiche.
server yeoman
Immediatamente, verrà lanciato Google Chrome, visualizzando il tuo progetto (inoltre, nessun errore di sicurezza in più). Bene, è comodo, ma, come scoprirai velocemente, c'è molto, molto altro da vedere. Posiziona il tuo browser e il tuo editor side-by-side e prova le seguenti cose:
Cambiare il h1 testo del tag, e guardarlo aggiornare istantaneamente nel browser, senza un aggiornamento. Yeoman al tuo servizio! Raggiunge questo, tramite l'estensione Google Chrome di LiveReload, ma, se non è installato, verrà utilizzato un processo di ricarica di fallback.
Modificare main.css a main.sass (o main.scss, se è la tua preferenza) e goditi la compilazione e l'aggiornamento istantanei nel browser. Per provarlo, prova a creare e usare una variabile.
// main.sass $ textColor: # 666 colore del corpo: $ textColor
Bello! Necessaria impostazione zero. Ora puoi separare i tuoi fogli di stile, se necessario, e importarli in main.sass.
// main.sass @import 'grid' @import 'buttons' @import 'module'
Ogni volta che un file viene salvato, Yeoman ricompilerà automaticamente il tuo Sass in un normale CSS e aggiornerà il browser.
Se sei un fan di Sass, allora è probabile che tu preferisca anche l'eccellente framework Compass. Nessun problema; Yeoman è felice di accontentarsi. Il supporto bussola è già disponibile; importa semplicemente i moduli applicabili e continua come al solito.
// main.sass @import 'compass / css' * + box-sizing (border-box) .box width: 200px + transition (larghezza 1s) &: hover width: 400px
Se non sei ancora un convertitore di preprocessore, devi ammettere: questo è significativamente migliore dell'alternativa:
* -webkit-box-dimensionamento: border-box; -moz-box-dimensionamento: border-box; dimensionamento della scatola: border-box; .box width: 200px; -webkit-transition: width 1s; -moz-transition: width 1s; -ms-transizione: larghezza 1s; -o-transizione: larghezza 1s; transizione: larghezza 1 s; .box: hover width: 400px;
JavaScript è perfetto e dandy, ma alcuni ritengono che CoffeeScript offra una sintassi notevolmente più pulita che riempie molte lacune del linguaggio (almeno visivamente).
All'interno del scripts / directory, facoltativamente crea una nuova cartella, caffè/, e aggiungi il tuo primo file CoffeeScript: person.coffee.
# scripts / coffee / person.coffee class Person
Salva il file e, come per magia, Yeoman lo compila immediatamente in JavaScript vaniglia e posiziona il nuovo file direttamente all'interno del genitore scripts / directory. Vedi di persona:
// scripts / person.js var Person; Person = (function () function Person () return Person;) ();
Perfetto e, cosa più importante, senza sforzo!
Se è necessario modificare in qualsiasi modo la struttura delle directory, fare riferimento a
gruntfile.jsfile nella root della tua applicazione. Dietro le quinte, lo strumento Grunt di Ben Alman è ciò che configura la compilation.
A questo punto da solo, Yeoman ci ha dato una grande flessibilità. Con quel singolo yeoman init comando, puoi ora personalizzare i tuoi siti web con Sass, codificare in CoffeeScript e, mentre apporti le modifiche, vedere immediatamente gli aggiornamenti riflessi nel browser. Ma non abbiamo ancora finito! Neanche vicino.
Yeoman sfrutta un potente gestore di pacchetti per il web, chiamato Bower. Cos'è un gestore di pacchetti? Bene, se stai ancora scaricando manualmente, ad esempio, la libreria di Underscore da underscorejs.org, allora stai sbagliando. Cosa succede quando la libreria viene aggiornata qualche mese dopo? Vuoi scaricare nuovamente la libreria manualmente? Il tempo è denaro; quindi lascia che Yeoman faccia il lavoro per te.
Inseriamo Underscore nel nostro progetto.
yeoman installa underscore
Yeoman risponderà a questo comando scaricando l'ultima versione della libreria e inserendola in una nuova venditore directory. Ora è pronto per essere utilizzato!
Ma, cosa succede se non siamo esattamente sicuri di quale sia il nome della risorsa che richiediamo? In queste situazioni, possiamo fare riferimento a ricerca yeoman. Senza passare alcun argomento, Yeoman restituirà un elenco di tutte le risorse che è possibile installare. Cerchiamo il popolare normalize.css progetto, di Nicolas Gallagher.
Ricorda: Bower non è esclusivamente per risorse specifiche di JavaScript.
la ricerca di yeoman si normalizza
Al momento della stesura di questo documento, devono essere restituiti due progetti:
Sembra normalizzare-css è quello che vogliamo.
yeoman installa normalize-css
Ora, importalo nello stesso modo in cui normalmente faresti:
In alternativa, rinominare il file in normalize.scss, e importalo nel tuo main.sass file.
// main.sass @import '... / scripts / vendor / normalize-css / normalize'
C'è una varietà di altri comandi specifici di Bower che vorrete ricordare:
Accentsconagua
yeoman uninstall jquery - Disinstallare un pacchetto.aggiornamento jquery - Aggiorna libreria alla versione più recente.lista delle donne - Elenca tutti i pacchetti attualmente installati.Se il test non fa ancora parte del tuo flusso di lavoro, dovrebbe essere! Cosa potrebbe esserci di meglio di un robot che verifica automaticamente il tuo lavoro dopo ogni salvataggio? Fortunatamente, Yeoman rende incredibilmente facile testare le tue applicazioni. Fuori dagli schemi, sono disponibili il famoso framework Mocha e PhantomJS (headless Webkit), sebbene sia facilmente configurabile, se preferisci uno strumento diverso, come Jasmine. Inoltre, offre la libreria di asserzione Chai, che presto ti piacerà.
Apri il test / index.html file. Verso il basso, vedrai un paio di esempi di test forniti. Vai avanti ed elimina quelli e crea un nuovo file di test: spec / person.js. Ecco un test per iniziare.
// test / spec / person.js describe ('A Person', function () it ('dovrebbe avere un'età superiore a 0', function () var person = new Nome della persona: 'Jeffrey', età: 27 expect (person.age) .to.be.above (0););); Se preferisci usare Chai's (una libreria di asserzioni) dovrebbero interfaccia, tornare a index.html, e cambiare expect = chai.expect a dovrebbe = chai.should (). Ora puoi aggiornare le tue specifiche, in modo che legga:
person.age.should.be.above (0);
Il metodo che scegli dipende interamente da te. Non esiste una scelta corretta; solo le preferenze.
Per eseguire questo test, tornare al terminale e digitare:
test degli yeoman
Come previsto, il test dovrebbe fallire con il messaggio: "Impossibile trovare la variabile: Person."È un test fallimentare, ma, soprattutto, funziona - stiamo testando! Poiché Yeoman sfrutta l'eccellente strumento PhantomJS (Webkit senza testa), questi test possono anche essere eseguiti senza il browser.
Se preferisci scrivere i tuoi test in CoffeeScript, dovrai apportare un paio di modifiche al tuo gruntfile.js. Inizia aggiungendo un nuovo compilare oggetto al bussola compito. All'interno di questo oggetto, specificare i file che devono essere guardati. In questo caso, stiamo istruendo Grunt per compilare tutti i file CoffeeScript all'interno test / spec / caffè.
// Coffee to JS: dist: src: 'app / scripts / ** / *. Coffee', dest: 'app / scripts', compila: files: "test / spec /": " test / spec / caffè / *. caffè "
L'ultimo passo è dire a Grunt di tenere d'occhio quella directory. Quando un file viene salvato, dovrebbe essere ricompilato di conseguenza.
Trovare la orologio compito e aggiornare il caffè oggetto, in questo modo:
# Tweet.text 