Share
Web Starter Kit è una nuova iniziativa di Google; parte della loro missione di snellire il flusso di lavoro di sviluppo web, sostenendo allo stesso tempo le migliori pratiche che suggeriscono nei Web Fundamentals di Google.
Al momento di scrivere, Web Starter Kit è stato in giro solo pochi giorni, lanciato come repo pubblico su Github. Ha immediatamente guadagnato aderenza alla community di sviluppo web, raggiungendo rapidamente il primo posto nei repository di trend di Github.
Ci sono un sacco di librerie e framework in questi giorni, ma Web Starter Kit è piuttosto eccitante e vale la pena esplorare. In questo post, ti spiegherò alcune delle sue funzionalità chiave e dimostrerò anche come utilizzarlo per il tuo prossimo nuovo progetto. Senza ulteriori indugi, iniziamo!
Come suggerisce il nome, Web Starter Kit è un toolkit di sviluppo progettato come punto di partenza per nuovi progetti. Google, nel suo repository Github, lo descrive come:
Un punto di partenza per lo sviluppo web di più dispositivi
A seguito di un'ispezione, si può notare che Web Starter Kit trae ispirazione da artisti come HTML5 Boilerplate e Yeoman (combina il meglio di entrambi questi popolari strumenti). Web Starter Kit viene fornito con modelli di avvio ottimizzati sia per la velocità che per più dispositivi.
Lavoriamo attivamente per fornire il miglior punteggio di PageSpeed Insights e il frame-rate possibile.
Oltre a ciò, comprende anche una serie di strumenti per facilitare lo sviluppo, tra cui uno strumento di test sincronizzato, un reloader del browser in tempo reale, un linter di JavaScript, un compilatore Sass, un minificatore CSS e un ottimizzatore di immagini. Proprio come in Yeoman, questi strumenti sono preconfigurati, quindi possiamo iniziare lo sviluppo senza perdere tempo nella configurazione.
Puoi prendere i file dal repository di Google e semplicemente scaricarli, ma per utilizzare completamente Web Starter Kit per il tuo nuovo progetto ti consigliamo di avere i seguenti strumenti installati sul tuo sistema:
Idiota: come detto sopra, il progetto Web Starter Kit è ospitato su Github. Lo troverai più snello per afferrare il repository attraverso il git clone comando piuttosto che scaricare il pacchetto Zip. Se usi l'app Github, premi il tasto Clona nel desktop pulsante dalla pagina repo:
Non sei sicuro di cosa si tratti git? dai un'occhiata a Git for Designers su Tuts + Code.
Node.js: molti degli strumenti che incontrerai in Web Starter Kit, come JSLinter, sono costruiti su Node.js. E verranno installati tramite Node Package Manager (NPM). È possibile fare riferimento a Installazione di Node e NPM, per ulteriore assistenza.
Rubino e Sass: Web Starter Kit utilizza gulp-ruby-sass per compilare Sass in CSS, che richiede sia il lavoro di Ruby e Sass. Per gli utenti di OS X e Linux, Ruby sarà già installato. Utenti Windows; usa RubyInstaller per installare Ruby. Una volta installato Ruby, esegui gem install sass dal prompt dei comandi per installare Sass.
Per ulteriori informazioni sull'installazione di Ruby e Sass, dai un'occhiata a Mastering Sass: Lezione 1.
Sorso: usare Gulp per gestire molte delle attività necessarie durante lo sviluppo sarà davvero d'aiuto. Con Node.js già sul tuo sistema, installa Gulp con il seguente comando:
npm install -g gulp
Infine, assicurati di idiota e npm i comandi sono accessibili. Digita il comando qui sotto per verificare se idiota e npm stanno funzionando.
git --version && npm -v
Questi comandi dovrebbero rispondere con idiota e npm versioni, come segue.
Ok, per iniziare, vai nella directory in cui vuoi avere il tuo progetto (naviga usando i comandi, o digita "cd", quindi trascina la cartella scelta nella finestra del terminale prima di premere "invio"), quindi esegui il seguente comando per clonare il progetto Web Starter Kit:
git clone https://github.com/google/web-starter-kit.git
Successivamente, modificare la directory corrente nella cartella "web-starter-kit" in cui risiedono i file del Web Starter Kit.
cd web-starter-kit
In questa cartella, web-starter-kit /, troverai:
Accentsconagua
app /; questa è la cartella in cui risiede tutto il codice sorgente non ancora risolto.package.json; arruolare le dipendenze.gulpfile.js; contenente la configurazione per eseguire l'attività Gulp.
Come accennato, Web Starter Kit si basa su numerosi pacchetti Node, inclusi i plugin Gulp, per eseguire diversi processi di compilazione. Quindi la prossima cosa da fare è installare i pacchetti Node che sono specificati nel file "package.json". Fallo semplicemente inserendo il seguente comando:
installazione di npm
Un'intera pila di pacchetti Node verrà quindi installata in una cartella denominata node_modules.
In poche parole, Gulp è simile a Grunt. Entrambi sono "task runner" che automatizzano determinati compiti durante lo sviluppo, mirando a gestire il duro lavoro per te. Normalmente, dovremmo specificare e configurare le attività di Gulp all'interno di a gulpfile.js, ma dal momento che Web Starter Kit ha fatto questo lavoro per noi, possiamo eseguire immediatamente le attività di Gulp senza toccare nulla.
Durante il corso del tuo processo di sviluppo, digita questo comando di seguito.
servire il gulp
Questo comando abiliterà BrowserSync che è stato incorporato e configurato ingulpfile.js. BrowserSync è uno strumento utile che ci permette di testare il sito web in modo sincrono su più browser. Con BrowserSync, l'interazione dell'utente come lo scorrimento, il clic e la compilazione degli input si rifletterà in tempo reale su tutti i dispositivi connessi. Questo ci consente di rilevare eventuali discrepanze che possono verificarsi in ogni dispositivo connesso mentre sta avvenendo l'interazione. BrowseSync è anche armato con server HTTP. Dopo aver eseguito questo comando ti verrà dato il localhost indirizzo dove è possibile accedere al sito web.
Inoltre, BrowserSync monitorerà le modifiche apportate all'interno dei file specificati, incluso l'HTML, i fogli di stile e le immagini. Quando modifichiamo questi file, BrowserSync eseguirà immediatamente l'attività che è stata specificata in gulpfile.js
Ogni volta che sei pronto per pubblicare il tuo sito web, puoi semplicemente eseguire sorso. Questo comando eseguirà tutte le attività Gulp, compila il progetto in un pacchetto distribuibile in una nuova cartella denominata dist / che è pronto per essere consegnato al tuo cliente.
Un elenco dettagliato delle attività di Gulp è disponibile negli strumenti Riepilogo di Web Starter Kit.
Web Starter Kit fornisce una guida di stile che dà il via allo stile di base di elementi e componenti comuni, come la tipografia, i pulsanti, i collegamenti, i breadcrumb, le tabelle, le icone e la griglia. Guardando attraverso la fonte troverai anche i selettori usati per produrre gli stili.
La Guida allo stile può essere trovata nel app / styleguide cartella ed è interconnessa con i fogli di stile, così possiamo vedere evolvere la Guida allo stile mentre il foglio di stile è aggiornato. Brillante!
Stile di base delle icone in primo piano nella Guida allo stile del kit per Web StarterNota: Assicurati di controllare la nostra serie All About Style Guides.
Molto bene! Abbiamo scaricato e installato il Web Starter Kit insieme alle sue dipendenze, quindi ora dovresti essere in grado di lavorare sul tuo progetto.
Tutto sommato, Web Starter Kit è piuttosto solido, anche nella sua attuale versione beta. Il modello e gli strumenti sono ben configurati; funzionano fuori dalla scatola. E visto che questo progetto è supportato da Google con sviluppatori brillanti dietro, Web Starter Kit potrebbe diventare rapidamente popolare come Bootstrap o Foundation. Non vedo davvero l'ora di vedere come si evolverà questo progetto in futuro.
