Share
Secondo yeoman.io, "Yeoman è un insieme di strumenti, librerie e un flusso di lavoro affidabili e convinti che possono aiutare gli sviluppatori a creare rapidamente applicazioni web belle e coinvolgenti." Scopriamolo e vediamo esattamente cosa significa!
_ .--------------------------. _ | o | _ | Benvenuto in Yeoman, | | _ | | Signore e signori! | / \ Y / \ o _________________________ | || : | // o / --- \ _ \ / _
Al giorno d'oggi una grande quantità di lavoro è dedicata alla creazione di app web. Ci sono innumerevoli librerie là fuori da usare, modelli, stili, griglie, piatti, collegamenti ... la lista continua! Yeoman è una risposta ad alcuni di questi problemi. Piuttosto che dover sprecare un sacco di tempo a far funzionare un'applicazione, Yeoman si prende il peso del lavoro per te - richiede solo pochi comandi.
Il modo più veloce per iniziare a utilizzare Yeoman è eseguire il seguente script.
curl -L get.yeoman.io | shNota: Yeoman è supportato da OSX, Linux e Windows. Questo processo funziona in circa 10 minuti. In un aggiornamento futuro, tuttavia, questa procedura di installazione verrà modificata.
Quindi, è stato facile. Cosa è appena successo? Un sacco di cose! Il install.sh file spento ,get.yeoman.io, ha un'intestazione che descrive esattamente cosa è successo.
# * Rileva Mac o Linux, scegli quale gestore pacchetti usare # * Su Mac, installa homebrew se non è presente # * Quindi installa questi: git optipng jpeg-turbo phantomjs # * Assicurati che Ruby> = 1.8.7 sia in giro, installa in caso contrario (per Compass) # * Installa il pacchetto NodeJS più recente # * Installa Compass # * Scarica Yeoman zip in una cartella temporanea # * Installa come un modulo nodo globale
E ce l'hai!
Yeoman è installato come un modulo Node globale, quindi apri il TOC (Terminal of Choice) ed esegui piccolo terriero.
La prima volta che viene eseguito, verrà richiesto se si desidera consentire loro di mantenere le statistiche sull'utilizzo di Yeoman. In realtà hanno una configurazione dell'account Google Analytics per tracciare tutti i tipi di statistiche di utilizzo interessanti.
Semplicemente in esecuzione piccolo terriero d'ora in poi stamperà un elenco dei comandi disponibili per l'esecuzione.
Accentsconagua
yeoman initÈ qui che avviene la magia dell'impalcatura. Esegui il seguente comando per un'app di base dello scaffold.
yeoman init
Questo comando porrà cinque domande:
Fuori dalla scatola, in esecuzione dentro includerà HTML5 Boilerplate e jQuery e Modernizr. Ecco una lista più estesa.
Inoltre compila i file CoffeeScript e Compass appena estratto dalla confezione!
generatori sono la magia dietro a tutte le impalcature. Il dentro comando, a sua volta, è basato su un generatore. C'è un repository separato per loro. Ce ne sono già molti disponibili, inclusi Spina dorsale, brace, e Angolare per citarne solo alcuni. Per visualizzare un elenco di tutti loro, esegui semplicemente ...
yeoman init --help
I generatori sono una parte enorme di Yeoman e sono pensati per essere modificati e aggiunti.
Mancia: Per assistenza sulla creazione del proprio generatore, fare riferimento all'area generatori della documentazione.Se vuoi creare la tua applicazione Backbone.js, puoi semplicemente eseguire:
mkdir backboneapp && cd backboneapp yeoman init backbone
Questo costruirà un progetto con diversi modelli di piastre, viste, collezioni, precaricati con il boilerplate di Lodash, Mocha, jQuery e HTML5.
Puoi fare lo stesso con angolare e brace Come menzionato in precedenza.
Ce ne sono vari sub generatori pure, che ti permettono di fare cose, come:
backbone di yeoman init: vedi awesomeView backbone di yeoman init: modello awesomeModel backbone di yeoman init: collezione awesomeCollection backbone di yeoman init: router awesomeRouter
Allora BAM, ne avrai di nuovi codez lavorare con, piuttosto che sprecare un sacco di tempo per riscrivere il codice boilerplate!
costruisca te stessoSotto le coperte, troverai Grunt, una struttura popolare, creata da Ben Alman (Cowboy), per la creazione di applicazioni JavaScript. Si basa su a grugnito file di opzioni di configurazione che configurano le attività per eseguire varie operazioni, come il linting, la combinazione, la minimizzazione, ecc.
Yeoman è costruito su Grunt, ma lo estende per fornire alcune nuove modifiche e funzionalità. Questi includono:
r.js La configurazione verrà posizionata all'interno di a gruntfile.js file nell'app generata. Al termine dello sviluppo, esegui quanto segue per creare l'app.
costruisca te stesso
La tua app di nuova costruzione sarà posizionata all'interno di a dist / cartella. Una caratteristica interessante è il modo in cui Yeoman eseguirà riferimenti di script, come ad esempio:
E, dopo aver eseguito la build, concat e minimizza quei file in un singolo copione riferimento. Sono dodici le richieste HTTP fino a uno!
È possibile trovare tutti i passaggi per il processo di creazione gruntfile.js, che viene generato quando viene creata l'app. Esistono anche diverse opzioni di destinazione.
server yeoman Yeoman offre anche un server di hosting integrato per testare localmente la tua app. LiveReload o semplice visualizzazione di file se non si dispone di LiveReload garantisce inoltre che, durante l'esecuzione del server, eventuali modifiche ai file nell'app ricaricheranno automaticamente il browser con le nuove modifiche. Per impostazione predefinita, la porta su cui verrà eseguito è 3051. Eseguendo quanto segue ...
# Esegui questo per la versione non costruita del server yeoman # O per la versione costruita del server yeoman: dist
Apparirà una nuova finestra di browswer con la tua app in esecuzione. Il server compilerà anche le risorse Coffee e Sass e le inserirà all'interno di a Temp directory. Quindi non devi preoccuparti di compilare! Ci sono molti altri target del server; assicurati di controllarli.
test degli yeoman Mocha è un popolare framework di test unitario ed è integrato in Yeoman. Quando un progetto è impalcato, una cartella di test con un index.html il file viene creato con Mocha e Chai per le asserzioni. Basta eseguire:
test degli yeoman
Yeoman eseguirà quindi Mocha contro PhantomJS, che è un browser webkit senza testa che viene eseguito all'interno di Node.js. Quindi, puoi sentirti libero di aggiungere nuovi test nel index.html file. Il test delle unità può migliorare notevolmente qualsiasi applicazione e Yeoman rende il processo il più semplice possibile. Quindi non ci sono più scuse! Puoi anche usare Jasmine, se preferisci, passando --gelsomino test-quadro al yeoman init comando.
installazione di yeomanPer installare nuove librerie client nella tua applicazione, Yeoman utilizza una libreria, chiamata Bower, sviluppata da alcune persone su Twitter.
Bower è un gestore di pacchetti per il web. Bower ti consente di installare facilmente risorse come immagini, CSS e JavaScript e gestisce le dipendenze per te.
Yeoman consente i seguenti comandi:
# Installa qualsiasi pacchetto (s) spazio delimitato yeoman installa jquery # Disinstalla cose yeoman disinstallazione jquery # Aggiorna cose aggiornamento yeoman jquery # Installa sottolineatura anche dal backbone dipende da esso yeoman installa backbone # Elenca tutte le cose installate lista yeoman # Vai a cerca cose in particolare basato su un nome yeoman lookup mocha # Vai a trovare elementi basati su una parola chiave yeoman look-up per sottolineare
Bower è un'eccellente aggiunta a Yeoman e risolve il problema del flusso di lavoro di dover recuperare costantemente le librerie, quando si creano app. Garantisce inoltre che siano aggiornati. Ecco un esempio di come potresti usare Bower.
installazione di bower installazione di jquery bower git: //github.com/maccman/package-jquery.git bower install http://code.jquery.com/jquery-1.7.2.js bower install ./repos/jquery
Le app installate con bower verranno archiviate in a component.json file nella radice dell'applicazione.
Creiamo una semplice applicazione Backbone dall'inizio alla fine.
# Crea una nuova app backbone di yeoman per l'app # Crea un nuovo backbone di yeoman per la creazione di modelli e modelli: backbone di init per la fotografia di un modello: foto di raccolta # Crea alcune nuove viste per le foto pubbliche di flickr backbone di yeoman init: visualizza flickr backbone di yeoman init: visualizza photoItem # WAVES HAND AND ADDS LOTS OF CODE # https://github.com/jcreamer898/yeomanbbapp server yeoman # Costruisci TUTTE LE COSE! yeoman build # Controlla il nuovo build man ... server yeoman: dist
Wow, è quasi troppo semplice - e non dimenticare che puoi creare alias Bash per abbreviare ulteriormente questo codice. La parte più difficile è stata la creazione dell'app di esempio! Ma questa è la sua bellezza. Yeoman ti porta via da
il codice boilerplate e ti permette di concentrarti esclusivamente sulle cose difficili!
Se vuoi, dai un'occhiata all'app per vedere come sono andate le cose. Direi piuttosto bene.
Yeoman può accelerare rapidamente il processo di sviluppo di una nuova applicazione. Piuttosto che perdere tempo a raccogliere le librerie e scrivere il codice boilerplate, invece, digita alcuni comandi e sei a posto! Ancora meglio, è open source e scritto da un paio di ragazzi che potresti conoscere!
Godere!
