Share
Quando sei nuovo nello sviluppo front-end e inizi a padroneggiare HTML5, CSS e JavaScript, l'ovvio passo successivo è mettere le mani su utensiliche la maggior parte degli sviluppatori usa per rimanere sano in questo spazio complesso. Anche tu meriti di avere più flessibilità e funzionalità mentre scrivi i tuoi fogli CSS usando Meno. Anche tu meriti di ottimizzare la larghezza di banda minimizzando il tuo codice JS. Anche tu meriti di essere in grado di controllare automaticamente che il tuo codice JS sia buono usando JSHint.
Ti meriti tutta questa roba buona.
Quindi inizi a utilizzare tutti questi fantastici strumenti a mano, eseguendo sempre più linee di comando manualmente. A volte, dimentichi di eseguire il Less compiler ... A volte dimentichi di eseguire JSHint e viene spedito un bug ...
E all'improvviso ti stai chiedendo: c'è qualche soluzione per automatizzare tutti questi strumenti? Come puoi creare un flusso di lavoro ripetibile per evitare di commettere errori?
Ovviamente esiste una soluzione e in particolare due strumenti ti aspettano per iniziare: Grugnito e Sorso.
Come novizio che usa questi strumenti, ti stai chiedendo come funzionano e quale usare, vero? Bene, allora perfetto, stai leggendo l'articolo giusto!
Ti darò le basi per l'utilizzo di Grunt e Gulp utilizzando un esempio davvero semplice che puoi scaricare da GitHub.
È un semplice sito Web composto da tre file:
Styles.less definisce il foglio CSS in maniera più ricca di quanto sia possibile utilizzando un file CSS standard. Alla fine usiamo il Less compiler per creare a styles.css file. Usando Less, siamo in grado ad esempio di utilizzare variabili nel file CSS:
Ottieni maggiori informazioni su Meno in questa guida introduttiva.
Il codice JavaScript e HTML sono davvero semplici. La pagina dovrebbe apparire così:
Devi prima capire come funziona Node.js Package Manager (npm).
Npm è lo strumento fornito con Node.JS. È usato per ottenere strumenti e framework mentre risolve automaticamente le loro dipendenze.
Ad esempio, per utilizzare Less e compilarlo in un file CSS utilizzabile sul Web, è necessario prima installare Meno utilizzando questo comando:
npm install -g less
Nota: per ottenere la riga di comando di npm, è necessario installare Node.js dal sito Web Node.
Fatto ciò, è possibile eseguire questo comando per compilare file .less in .css:
lessc styles.less> styles.css
Npm utilizza un file che crea e memorizza nella cartella locale in cui sta lavorando: package.json. Questo file utilizza il formato JSON (JavaScript Object Notation) per consentire a npm di sapere quale strumento e versione sono installati e i framework utilizzati dalla corrente progetto (che è rappresentato dalla cartella corrente).
Questo file è importante per Grunt e Gulp perché conterrà l'elenco di plug-in scaricati e utilizzabili nel flusso di lavoro dell'automazione.
Per creare un file package.json vuoto puoi utilizzare il seguente comando npm:
npm init
Passerai attraverso alcune domande a cui puoi rispondere usando l'opzione predefinita, e poi sarai pronto per iniziare.
In questo file avrai due tipi di dipendenze:
In pratica Npm ti offre tre modi per installare i pacchetti:
Accentsconagua
-g o -globale opzione--save-dev opzioneIl terzo creerà a devDependencies sezione / proprietà all'interno del file package.json.
Grunt è un pioniere nell'area del flusso di lavoro dell'automazione JavaScript. Ci sono molti utenti noti di Grunt come Twitter, jQuery e Modernizr.
Il principio di base per Grunt è di darci un modo semplice per correre compiti. Un'attività è un insieme di file di codice e file di configurazione già creati per te. Puoi ottenere nuove attività installando plugin Grunt che utilizzerai npm. Puoi trovare un plugin per quasi tutti gli strumenti che potresti utilizzare, come Less e JSHint.
Per eseguire Grunt, devi creare un Gruntfile in cui devi specificare quali attività vuoi eseguire e la configurazione per ognuna di esse. Una volta fatto, devi solo eseguire il grugnito riga di comando che specifica l'attività che si desidera eseguire (predefinita o specifica) e lo farà automaticamente.
Ora passiamo attraverso una guida passo-passo per impostare tutto questo.
Usa npm per iniziare il file:
npm init
Dovrai rispondere ad alcune domande come il nome del progetto e qual è il file .js predefinito. Puoi anche scegliere di creare il file manualmente e impostarne il contenuto su:
"nome": "nome-progetto", "devDependencies": , "dipendenze":
È necessario installare Grunt a livello globale per ottenere la riga di comando e localmente per inizializzare tutto ciò che è necessario per il progetto.
Correre:
npm install -g grunt
Quindi eseguilo localmente:
npm install grunt --save-dev
Nota: non dimenticare il -dev parte per essere specificato come uno dei devDependencies nel package.json file.
Grunt funziona usando un file chiamato gruntFile.js. Questo file contiene tutto il necessario per Grunt, vale a dire:
Grunt si aspetta che il file esporti una singola funzione che prende un parametro chiamato "grunt". Userai questo oggetto per eseguire tutte le azioni relative di Grunt.
Ecco un gruntfile minimo che legge solo il file package.json e crea un file predefinito compito che non esegue nulla.
Nota: posizionare il file nella cartella del progetto, parallelamente al file package.json.
module.exports = function (grunt) // Configurazione del progetto. grunt.initConfig (pkg: grunt.file.readJSON ('package.json'),); // Attività (i) predefinite. grunt.registerTask ('default', []); ; Puoi eseguirlo per essere sicuro che tutto sia configurato correttamente.
Per fare ciò, apri un prompt dei comandi nella cartella del progetto ed esegui:
grugnito
Dovresti vedere qualcosa di simile a questo:
Ora che il tuo Gruntfile è pronto, il prossimo passo è aggiungere un plugin e usarlo. Tutti i plugin possono essere trovati nella lista sul sito web di Grunt. Una delle attività più comuni eseguite in un Gruntfile sta controllando se la sintassi JavaScript è corretta. Per farlo, solitamente usiamo JSHint.
Aggiungiamolo al tuo flusso di lavoro.
Se cerchi JSHint nella pagina dei plugin grunt, troverai grunt-contrib-jshint, che corrisponde a ciò di cui abbiamo bisogno!
Nella cartella del progetto, esegui:
installa npm grunt-contrib-jshint --save-dev
Fatto questo, devi aggiungerlo nel tuo Gruntfile.js. Ci sono due semplici passaggi per questo:
Per caricare il plugin, usa il loadNpmTasks funzione:
// Carica il plugin che fornisce l'attività "jshint" grunt.loadNpmTasks ('grunt-contrib-jshint');La configurazione è fatta nel initconfigfunzione in cui devi aggiungere una nuova proprietà all'oggetto indicato nel parametro. Questo deve essere il nome dell'attività che si desidera aggiungere ed è correlato al plugin che si utilizza. Il modo migliore per conoscere quel nome e l'elenco delle opzioni disponibili per l'attività è dare un'occhiata alla documentazione del plugin. Troverai sempre un campione ben documentato.
Ad esempio, nel nostro esempio vogliamo controllare tutti i file JavaScript tranne gruntfile.js. Vogliamo anche attivare una serie di regole per controllare i file JavaScript come eqeqeq per garantire che usiamo equazioni triple quando necessario.
Ecco il initconfig funzione modificata:
È possibile eseguire l'attività utilizzando la seguente riga di comando (in cui si specifica il nome dell'attività come parametro per grugnito):
grunt jshint
Il risultato è qui:
Devi solo eseguire quel comando e ti chiederà automaticamente eventuali errori che incontra.
Congratulazioni, ora hai un compito automatizzato nel tuo flusso di lavoro!
L'attività JSHint funziona bene, ma è un po 'sola nel flusso di lavoro. Di solito, usiamo strumenti come Grunt per eseguire più di un compito.
È davvero facile aggiungerne di più, basta seguire gli stessi passi. Diciamo che ora vuoi aggiungere la compilation per il tuo file meno all'interno del processo automatizzato. Se cerchi nei plugin Grunt, troverai a grugnito-contrib-less plugin che puoi installare nella cartella del tuo progetto:
installa npm grunt-contrib-less --save-dev
Come con l'attività JSHint, devi aggiungere la configurazione:
Quindi, caricare l'attività:
Ora puoi eseguire Grunt e specificare il Di meno compito: questo lancerà solo meno. Va bene, ma tu vuoi eseguire tutti i compiti, giusto? Questo è il ruolo del predefinitocompito.
Quando corri grugnito senza specificare alcuna attività, cercherà a predefinito eseguire ed eseguire tutte le attività specificate nel suo array. È possibile modificarlo per l'esecuzione Di meno e jshint. Si noti che per aggiungere un gruppo di attività come predefinito, devi chiamare il registerTaskfunzione:
Da ora, quando corri grugnito, funzionerà jshint, e poi Di meno:
È possibile aggiungere qualsiasi attività desiderata e si può anche specificare un altro gruppo di attività come predefinito e chiamali passando il loro nome come argomento al grugnito riga di comando.
Facile, giusto?
Ora, sei uno sviluppatore felice. Tutte le tue attività ripetitive sono automatizzate all'interno di un flusso di lavoro grunt, e devi solo eseguire grunt per loro da eseguire. Ma può essere fatto ancora più facilmente. Può essere fatto automaticamente.
Per fare ciò, è possibile aggiungere un'attività specifica denominata orologio. Questa attività controllerà costantemente la cartella di lavoro e, in base alle regole, quando un file viene modificato, grunt eseguirà un'attività associata.
Innanzitutto, installa orologio nella cartella del tuo progetto:
npm installa grunt-contrib-watch --save-dev
Caricalo come tutte le altre attività usando il loadNpmTasks funzione e configurarlo. La parte config è un po 'diversa qui perché è necessario specificare una configurazione per ogni attività che si desidera coprire utilizzando orologio.
Per ulteriori informazioni, è possibile leggere la documentazione completa per questa attività.
Quando vuoi attivare orologio, devi solo eseguire il seguente comando:
orologio da grugnito
Ed eseguirà attività ogni volta che un file viene modificato e questo file è nel campo di applicazione dei file guardati per l'attività specifica.
E questo è tutto! Ora sai tutto per creare un flusso di lavoro automatizzato usando grunt.
Gulp è un'alternativa al grugnito. È un po 'più recente e ha la reputazione di essere più flessibile di un grugnito. Prima di scegliere quale usare, diamo un'occhiata a come funziona gulp.
Gulp è uno strumento di automazione del flusso di lavoro. Come grunt, funziona usando npm e il file package.json. Tutti i plugin disponibili verranno anche scaricati usando npm e aggiunti come devDependencies nel file package.json.
Una delle principali differenze è che Gulp utilizza flussi. Un flusso è un insieme di funzioni attraverso le quali un file andrà e sarà modificato in memoria. Il file verrà scritto sul disco solo alla fine del processo, quindi è più efficiente. I compiti grunt, d'altra parte, funzionano come silos e non possono essere concatenati.
Diamo una rapida occhiata a come Gulp funziona seguendo alcuni semplici passaggi.
Simile a Grunt, devi prima creare il file package.json. Puoi usare esattamente la stessa tecnica usata per il campione del grunt.
Una volta creato il file package.json, installare gulp globalmente e localmente usando:
npm install -g gulp
e
npm install gulp --save-dev
Questo installerà la riga di comando di Gulp e tutto il necessario per eseguire un flusso di lavoro ingurgitato.
Dovrai quindi installare gulp utils, che contiene funzioni comuni condivise da altri plugin:
npm installa gulp-util --save-dev
Infine, crea il file gulp minimo, che sarà simile a questo:
Come puoi vedere, è un po 'diverso dalla sintassi del grunt. In Gulp, i plugin vengono caricati usando il richiedere la sintassi a cui potresti essere abituato se sei uno sviluppatore Node.js. C'è anche un predefinito compito definito usando il gulp.task funzione.
Se esegui il sorsoriga di comando utilizzando un prompt dei comandi nella cartella del progetto, dovresti vedere un risultato come questo:
Per usare un plugin in Gulp, usi la stessa funzione di quello che abbiamo usato per creare il predefinito compito. Questo perché non è necessario utilizzare un nome specifico per creare un'attività. Basta chiamare gulp.task, imposta il nome desiderato e assegnagli una funzione JavaScript come secondo parametro. Quando gulp esegue l'attività, eseguirà questa funzione.
Per usare un plugin, puoi chiamarlo usando il nome che hai scelto quando lo hai richiesto. Di solito, lo chiami come parte di un flusso di lavoro di streaming che generalmente inizia con una selezione di file. Questo è fatto con il gulp.src funzione. Selezionerà un gruppo di file e restituirà un flusso che può essere utilizzato da un'altra funzione tubo. È così che puoi concatenare più azioni senza scriverle sul disco. Basta passare il flusso da un plugin all'altro.
Ecco un esempio di base per Meno:
Per prima cosa richiedere ('gulp-less') caricare il Di meno plugin per gulp. (L'abbiamo usato npm install gulp-less --save-dev).
Poi gulp.src selezionerà tutto il .Di meno i file, li "colleghiamo" al Di meno()funzione e alla fine è 'convogliata' a gulp.destche indica dove scrivere il risultato. Poiché gulp.src può selezionare più di un file, gulp.dest specifica una cartella.
Una volta compreso il modello di piping, puoi ottenere facilmente lo stesso risultato ottenuto con il grunt.
Il potere di Gulp è che puoi creare attività personalizzate in cui chiami più di un plugin e dove puoi associarli nel modo desiderato.
Nota: ovviamente c'è anche a gulp-watch plugin che puoi utilizzare per automatizzare l'avvio del tuo flusso di lavoro!
Spero che tu ora abbia una comprensione più chiara del perché hai bisogno di un flusso di lavoro di automazione e di come puoi usare Grunt o Gulp per ottenerlo.
Scegliere uno di questi è più legato al compito che si desidera raggiungere.
Grunt è facile da usare. Non è necessario comprendere il sistema di tubazioni e ottenere semplici compiti sarà più semplice. È uno strumento davvero maturo, utilizzato da molti editori e sviluppatori conosciuti, e ci sono molti plugin disponibili.
Detto questo, il modo in cui Gulp è progettato può darti molta flessibilità. È esistito già da un po 'di tempo e, anche se non troverai tanti plugin per Grunt, tutti quelli classici sono disponibili per Gulp.
Se stai utilizzando un flusso di lavoro veramente standard con passaggi comuni come JSHint, uglifying, CSS validating, ecc., Grunt è una buona scelta. Se sei impegnato in compiti più complicati, Gulp sarà un buon gregario.
Microsoft ha un sacco di apprendimento gratuito su molti argomenti JavaScript open source, e siamo in missione per creare molto di più con Microsoft Edge. Ecco alcuni da verificare:
E alcuni strumenti gratuiti per iniziare: Visual Studio Code, Azure Trial e strumenti di test cross-browser, tutti disponibili per Mac, Linux o Windows.
Questo articolo fa parte della serie di web dev tech di Microsoft. Siamo entusiasti di condividere Microsoft Edge e il nuovo Motore di rendering EdgeHTML con te. Ottieni macchine virtuali gratuite o test in remoto sul tuo dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/.
