Brug af Gulp 4 i din arbejdsgang til Sass- og JS-filer

Dette indlæg blev oprindeligt offentliggjort på Coder-Coder.com.

Denne vejledning forklarer trin for trin, hvordan du opsætter Gulp 4 i din arbejdsgang, samt hvordan du migrerer fra Gulp 3 til Gulp 4-syntaksen.

Brug for bare hurtigt at få din Gulp 3 gulpfile.js til at arbejde med Gulp 4? Klik her for at gå direkte til den del af indlægget.
  1. Installer gulp-cli på din kommandolinje ved at køre npm install gulp-cli -g.
  2. Installer Gulp ved at køre npm install gulp.
  3. Installer andre npm-pakker til din Gulp-arbejdsgang.
  4. Opret en gulpfile.jsfil i din projektrod.
  5. Importer dine npm-pakker som moduler i din gulpfile.
  6. Føj dine opgaver til gulpfilen for at kompilere dine SCSS / JS-filer og køre en overvågningsopgave.
  7. Kør gulpkommandoen for at køre alle dine opgaver.

Hvad er Gulp, og hvad gør det?

Gulp er et værktøj, der kører forskellige opgaver for dig i din workflow for webudvikling. Det kan kaldes en bundler, build-værktøj eller en task-runner. De betyder alle omtrent det samme.

Lignende værktøjer er Webpack og Grunt (selvom Grunt hurtigt bliver forældet).

Her er hvad vi skal have Gulp til for os:

  1. Kompiler vores Sass-filer til CSS
  2. Føj leverandørpræfikser til vores CSS
  3. Komprimer vores endelige CSS-fil
  4. Sammenkæd (dvs. kombinere) vores JS-filer
  5. Oplys vores sidste JS-fil
  6. Flyt de endelige CSS / JS-filer til vores /distmappe.

Temmelig sejt, ikke ?!

Så som det fungerer, er alle dine indstillinger og opgaver gemt i en gulpfile.jsfil. Og du kører Gulp på din kommandolinje.

Den store del ved det er, at når du først har din gulpfile klar, kan du nemt genbruge den til andre projekter. Så det er en enorm tidsbesparelse!

Lad os gå videre til installation og opsætning af Gulp på din computer.

Installation af Gulp ved hjælp af et fungerende demoprojekt

Inden du kan køre Gulp, skal du installere et par ting:

  • Installer Node.js, hvis du ikke har det endnu.
  • Installer Gulp Command Line Utility ved at køre npm install --global gulp-cli.

Når du har Gulp i gang, skal du tjekke et demoprojekt, jeg har bygget, der bruger Gulp! Det er et front-end kedelpladeprojekt, der er beregnet til at være en hurtig måde for mig at komme i gang med ethvert simpelt front-end-websted.

(Jeg har også masser af kodestykker i resten af ​​denne tutorial, så du kan bare henvise til dem også!)

Sådan indstilles front-end kedelpladeprojektet:

  • Klon eller download Git repo af dette projekt til din computer.
  • Åbn projektet, og i rodprojektmappen skal du gå til din kommandolinje og køre npm install. Dette installerer de npm-pakker, der er anført i package.jsonfilen, især Gulp 4.

Du skal nu have opsat projektfilerne og installere alle de npm-pakker, som vi bruger til at køre Gulp-opgaver.

Da filerne fra repoen er klar til at gå, hvis du skriver i gulpkommandolinjen, skal du se en output som denne:

> gulp [22:29:48] Using gulpfile ~\Documents\GitHub\frontend-boilerplate\gulpfile.js [22:29:48] Starting 'default'... [22:29:48] Starting 'scssTask'... [22:29:48] Starting 'jsTask'... [22:29:48] Finished 'jsTask' after 340 ms [22:29:48] Finished 'scssTask' after 347 ms [22:29:48] Starting 'watchTask'...

Og du har kørt Gulp!

Hvad sker der i projektet, når du kører Gulp?

Okay, du har projektet med succes at arbejde! Lad os nu komme nærmere ind på, hvad der er i projektet, og hvordan det fungerer.

Først er her en hurtig gennemgang af filstrukturen i vores projekt:

  • index.html - din vigtigste HTML-fil
  • package.json - indeholder alle de npm-pakker, der skal installeres, når du kører npm install.
  • gulpfile.js - indeholder konfigurationen og kører alle Gulp-opgaver
  • / app - arbejdsmappe, du redigerer SCSS / JS-filer herinde
  • / dist - Gulp udsender filer her, rediger ikke disse filer

I din arbejdsgang redigerer du HTML-, SCSS- og JS-filerne. Gulp vil derefter opdage eventuelle ændringer og kompilere alt. Derefter indlæser du dine endelige CSS / JS-filer fra /distmappen i din index.htmlfil.

Nu hvor vi har Gulp kørende, lad os se nærmere på, hvordan Gulp fungerer.

Hvad er der nøjagtigt i gulpfile.js?

Her er en grundig forklaring på hvert afsnit af gulpfilen, og hvad de gør:

Trin 1: Initialiser npm-moduler

Øverst på toppen gulpfile.jshar vi en hel masse konstanter, der importerer de npm-pakker, vi installerede tidligere ved hjælp af require()funktionen.

Her er hvad vores pakker gør:

Gulp-pakke:

  • gulp- kører alt i gulpfile.js. Vi eksporterer bare de specifikke Gulp funktioner, som vi vil bruge, som src, dest, watchog andre. Dette giver os mulighed for at kalde disse funktioner direkte uden gulp, for eksempel kan vi bare skrive i src()stedet for gulp.src().

CSS-pakker:

  • gulp-sourcemaps - kortlægger CSS-typografierne tilbage til den originale SCSS-fil i dine browserudviklingsværktøjer
  • gulp-sass - kompilerer SCSS til CSS
  • gulp-postcss - kører autoprefixer og cssnano (se nedenfor)
  • autoprefixer - føjer sælgerpræfikser til CSS
  • cssnano - minimerer CSS
If you’ve used Gulp before, you might be wondering why I’m using straight-up autoprefixer and cssnano, instead of gulp-autoprefixer and gulp-cssnano. For some reason, using them will work, but will prevent sourcemaps from working. Read more about that issue here.

JS packages:

  • gulp-concat — concatenates multiple JS files into one file
  • gulp-uglify — minifies JS

Now that we have our modules added, let’s put them to work!

Step 2: Use the modules to run your tasks

A “task” in Gulp is basically a function that performs a specific purpose.

We’re creating a few utility tasks to compile our SCSS and JS files, and also to watch those files for any changes. Then those utility tasks will be run in our default Gulp task when we type gulpon the command line.

Creating constants for file paths

Before writing our tasks, though, we have a few lines of code that save our file paths as constants. This is optional, but I like using path variables so that we don’t have to manually retype them each time:

This code creates scssPath and jsPath constants that we will use to tell Gulp where files are found.

Sass task

Here’s the code for our Sass task:

function scssTask(){ return src(files.scssPath) .pipe(sourcemaps.init()) .pipe(sass()) .pipe(postcss([ autoprefixer(), cssnano() ])) .pipe(sourcemaps.write('.')) .pipe(dest('dist') );}

Our Sass task, called scssTask(), is doing several things. In Gulp, you can chain multiple functions by using the Gulp function pipe() after the first function.

In our task, Gulp is first running src() to load the source directory of the SCSS files. It’s using the constant we created earlier, files.scssPath.

Then after src() we’re piping everything else into the build process. You can think about it like adding more and more sections of pipe onto an existing pipe.

The functions it’s running are:

  • sourcemaps.init() — sourcemaps needs to be added first after src()
  • sass() does the compiling of all the SCSS files to one CSS file
  • postcss() runs two other plugins:
  • - autoprefixer() to add vendor prefixes to the CSS
  • - cssnano() to minify the CSS file
  • sourcemaps.write() creates the sourcemaps file in the same directory.
  • dest() tells Gulp to put the final CSS file and CSS sourcemaps file in the /dist folder.

JS task

Here’s the code for our JavaScript task:

function jsTask(){ return src([files.jsPath]) .pipe(concat('all.js')) .pipe(uglify()) .pipe(dest('dist') );}

Our JavaScript task, called jsTask(), is also running multiple functions:

  • src() to load the JS files from files.jsPath.
  • concat() to concatenate all the JS files into one JS file.
  • uglify() to uglify/minify the JS file.
  • dest() to move the final JS file into the /dist folder.

Watch task

The watch() function is a super handy part of Gulp. When you run it, it will run continuously, waiting to detect any changes to the files you tell it to watch. When it detects changes, it will run any number of tasks you tell it to.

This is great because then you don’t have to keep manually running gulp after every code change.

Here’s the code for our watch task:

function watchTask(){ watch( [files.scssPath, files.jsPath], parallel(scssTask, jsTask) );}

The watch() function takes three parameters, but we’re just using two:

  • globs, meaning the file path strings,
  • options (not used), and
  • tasks, meaning which tasks we want to run.

What we’re having our watch task do is watch the files in our scssPath and jsPath directories. Then if any changes are made in either, run the scssTask and jsTask tasks simultaneously.

Now that we’ve gotten our utility tasks set up, we need to set up our main Gulp task.

Default task

This is the main Gulp task, which will automatically run if you type in gulp on the command line.

exports.default = series( parallel(scssTask, jsTask), watchTask);

Gulp will automatically search for a default task in your gulpfile.js when you use the gulpcommand. So you must export the default task in order for it to work.

Our default task will do the following:

  • Run the scssTask and jsTask simultaneously using parallel()
  • Then run the watchTask

You’ll also notice that we are putting all those tasks inside the series() function.

This is one of the major new changes in Gulp 4 for how it handles tasks– you are required to wrap all tasks (even single ones) either in series() or parallel().

A note on registering tasks: what’s changed in Gulp 4

If you’ve been using the tasks() function to run everything, you may have noticed that there’s a difference now.

Instead of using gulp.task() to contain all your task functions, we’re creating actual functions like scssTask() and watchTask().

This is to follow Gulp’s official guidelines for creating tasks.

The Gulp team recommends using exports rather than tasks():

“In the past, task() was used to register your functions as tasks. While that API is still available, exporting should be the primary registration mechanism, except in edge cases where exports won’t work.” [Gulp Documentation]

So, while they still let you use the task() function, it’s more current to create JS functions for each task and then export them.

If you can, I’d recommend updating your syntax to reflect this, as it’s possible that Gulp will deprecate task() at some point.

Problems Migrating from Gulp 3?

If you’ve been using Gulp 3 and all you want is to get the dang thing working with Gulp 4, you’re in luck!

Before, in Gulp 3, you could simply list a single function or multiple functions in an array. However, in Gulp 4, doing so without wrapping them in either series() or parallel() will throw an error now.

Something like:

AssertionError [ERR_ASSERTION]: Task function must be specified

Gulp 4 introduces two new functions to run tasks: series() and parallel(). It gives you the option of running multiple tasks concurrently, or one after the other.

So to quickly fix the error, put all your tasks into either a series() or parallel()function.

Tasks in (old) Gulp 3 syntax

In Gulp 3, you might have run tasks this way:

gulp.task('default', ['sass', 'js', 'watch']);

gulp.watch('app/scss/*.scss', ['sass']);

Tasks in Gulp 4 syntax

Put those tasks into a series() function like this:

gulp.task('default', gulp.series('sass', 'js', 'watch'));

gulp.watch('app/scss/*.scss', gulp.series('sass'));

And that will fix the task function error with the smallest change possible! ?

Project files download

Al den kode, jeg har vist her, er fra et GitHub-lager, jeg har til front-end kedelplade. Det er ment som et hurtigt startpakke til ethvert simpelt front-end-webstedsprojekt.

Du er velkommen til at tjekke det ud, tilpasse og bruge det til dine egne projekter!

Tjek GitHub-arkivet her.

Til sidst

Jeg håber, at du har fundet denne gennemgang af, hvordan du får Gulp 4 til at køre nyttigt!

Hvis du kunne lide dette indlæg eller har et spørgsmål, er du velkommen til at efterlade en kommentar nedenfor! ?

Ønsker mere?

? Læs flere tutorials på min blog, coder-coder.com.

? Tilmeld dig her for at få e-mails om nye artikler.

? Deltag i mere end 24.000+ - Følg @thecodercoder på Instagram.

? Tjek kodningsvejledninger på min YouTube-kanal.