Gulp - Nozioni di base

In questo capitolo, acquisirai familiarità con alcune nozioni di base relative a Gulp.

Cos'è un sistema di compilazione?

Un sistema di compilazione viene indicato come raccolta di attività (denominate collettivamente come task runners), che automatizzano il lavoro ripetitivo.

Di seguito è riportato un elenco di alcune delle attività che possono essere gestite utilizzando il sistema di compilazione:

  • Compilazione di CSS e JavaScript preprocessi.
  • Minimizzazione dei file per ridurne le dimensioni.
  • Concatenazione di file in uno.
  • Attivazione del server per il ricaricamento automatico.
  • Creazione di build di distribuzione per archiviare i file risultanti in un'unica posizione.

Nel moderno flusso di lavoro front-end, il sistema di compilazione funziona con 3 componenti:

  • Gestori di pacchetti
  • Preprocessors
  • Task runner e strumenti di costruzione

Gestori di pacchetti

Viene utilizzato per automatizzare l'aggiornamento dell'installazione, la rimozione delle dipendenze richieste, le librerie pulite e i pacchetti utilizzati nell'ambiente di sviluppo. Esempio per i gestori di pacchetti sonobower e npm.

Preprocessori

I preprocessori sono molto utili per un flusso di lavoro moderno efficiente aggiungendo una sintassi ottimizzata e funzionalità aggiuntive che vengono compilate nella sua lingua madre.

Alcuni dei preprocessori popolari sono:

  • CSS - SASS, LESS e Stylus.

  • JS - CoffeeScript, LiveScript, TypeScript, ecc.

  • HTML - Markdown, HAML, Slim, Jade, ecc.

Task Runners

I task runner automatizzano attività come la conversione da SASS a CSS, minimizzano i file, ottimizzano le immagini e molte altre attività utilizzate nel flusso di lavoro di sviluppo. Gulp è uno dei task runner nel moderno ambiente di lavoro front-end e funziona su Node.

Impostazione del progetto

Per impostare il tuo progetto sul tuo computer, crea una cartella chiamata "lavoro" per esempio. La cartella di lavoro contiene le seguenti sottocartelle e file:

  • Src - Posizione dei file e delle cartelle di origine HTML preelaborati.

    • Images - Contiene immagini non compresse.

    • Scripts - Contiene più file di script preelaborati.

    • Styles - Contiene più file CSS preelaborati.

  • Build - Questa cartella verrà creata automaticamente che contiene i file di produzione.

    • Images - Contiene immagini compresse.

    • Scripts - File di script singolo che contiene codici minimizzati.

    • Styles - Singolo file CSS che contiene codici minimizzati.

  • gulpfile.js - È il file di configurazione, che viene utilizzato per definire le nostre attività.