Χρήση του Gulp 4 στη ροή εργασίας σας για αρχεία Sass και JS

Αυτή η ανάρτηση δημοσιεύτηκε αρχικά στο Coder-Coder.com.

Αυτό το σεμινάριο θα εξηγήσει, βήμα προς βήμα, πώς να ρυθμίσετε το Gulp 4 στη ροή εργασίας σας, καθώς και τον τρόπο μετεγκατάστασης από τη σύνταξη Gulp 3 στο Gulp 4.

Θέλετε να δουλέψετε γρήγορα το Gulp 3 gulpfile.js με το Gulp 4; Κάντε κλικ εδώ για να μεταβείτε δεξιά σε αυτό το μέρος της ανάρτησης.
  1. Εγκαταστήστε το gulp-cli στη γραμμή εντολών σας εκτελώντας npm install gulp-cli -g.
  2. Εγκαταστήστε το Gulp εκτελώντας npm install gulp.
  3. Εγκαταστήστε άλλα πακέτα npm για τη ροή εργασίας του Gulp.
  4. Δημιουργήστε ένα gulpfile.jsαρχείο στη ρίζα του έργου σας.
  5. Εισαγάγετε τα πακέτα npm ως μονάδες στο gulpfile σας.
  6. Προσθέστε τις εργασίες σας στο gulpfile για να μεταγλωττίσετε τα αρχεία SCSS / JS και να εκτελέσετε μια εργασία παρακολούθησης.
  7. Εκτελέστε την gulpεντολή για να εκτελέσετε όλες τις εργασίες σας.

Τι είναι το Gulp και τι κάνει;

Το Gulp είναι ένα εργαλείο που θα εκτελεί διάφορες εργασίες για εσάς στη ροή εργασιών ανάπτυξης ιστού. Μπορεί να ονομαστεί bundler, build tool ή task runner. Όλα σημαίνουν σχεδόν το ίδιο πράγμα.

Παρόμοια εργαλεία είναι το Webpack και το Grunt (αν και το Grunt γίνεται γρήγορα παρωχημένο).

Εδώ θα κάνουμε το Gulp για εμάς:

  1. Μεταγλωττίστε τα αρχεία Sass στο CSS
  2. Προσθέστε προθέματα προμηθευτών στο CSS μας
  3. Ελαχιστοποιήστε το τελικό αρχείο CSS
  4. Συνδυάστε (δηλαδή συνδυάστε) τα αρχεία JS μας
  5. Αναβαθμίστε το τελικό αρχείο JS
  6. Μετακινήστε τα τελικά αρχεία CSS / JS στο /distφάκελό μας .

Πολύ ωραίο, σωστά ;!

Έτσι, ο τρόπος που λειτουργεί είναι, όλες οι ρυθμίσεις και οι εργασίες σας αποθηκεύονται σε ένα gulpfile.jsαρχείο. Και τρέχετε το Gulp στη γραμμή εντολών σας.

Το σημαντικό είναι ότι μόλις ρυθμίσετε το gulpfile σας, μπορείτε εύκολα να το χρησιμοποιήσετε ξανά για άλλα έργα. Έτσι είναι μια τεράστια εξοικονόμηση χρόνου!

Ας προχωρήσουμε στην εγκατάσταση και ρύθμιση του Gulp στον υπολογιστή σας.

Εγκατάσταση του Gulp, χρησιμοποιώντας ένα έργο επίδειξης που λειτουργεί

Για να μπορέσετε να εκτελέσετε το Gulp, θα χρειαστεί να εγκαταστήσετε μερικά πράγματα:

  • Εγκαταστήστε το Node.js εάν δεν το έχετε ακόμη.
  • Εγκαταστήστε το βοηθητικό πρόγραμμα γραμμής εντολών Gulp εκτελώντας npm install --global gulp-cli.

Μόλις δουλέψετε το Gulp, δείτε ένα έργο επίδειξης που έφτιαξα που χρησιμοποιεί το Gulp! Πρόκειται για ένα έργο boilerplate front-end που προορίζεται να είναι ένας γρήγορος τρόπος για να ξεκινήσω με οποιονδήποτε απλό ιστότοπο front-end.

(Έχω επίσης πολλά αποσπάσματα κώδικα στο υπόλοιπο αυτού του σεμιναρίου, ώστε να μπορείτε να ανατρέξετε σε αυτά επίσης!)

Για να ρυθμίσετε το έργο εμπρόσθιου λέβητα:

  • Κλωνοποιήστε ή κατεβάστε το repo Git αυτού του έργου στον υπολογιστή σας.
  • Ανοίξτε το έργο και στο ριζικό φάκελο του έργου, μεταβείτε στη γραμμή εντολών και εκτελέστε το npm install. Αυτό θα εγκαταστήσει τα πακέτα npm που αναφέρονται στο package.jsonαρχείο, ιδιαίτερα το Gulp 4.

Θα πρέπει τώρα να έχετε ρυθμίσει τα αρχεία έργου και όλα τα πακέτα npm εγκατεστημένα που θα χρησιμοποιούμε για την εκτέλεση εργασιών Gulp.

Δεδομένου ότι τα αρχεία από το repo είναι έτοιμα για χρήση, εάν πληκτρολογήσετε στη gulpγραμμή εντολών, θα πρέπει να δείτε μια έξοδο όπως αυτή:

> 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'...

Και τρέξατε το Gulp!

Τι συμβαίνει στο έργο όταν εκτελείτε το Gulp;

Εντάξει, το έργο λειτουργεί επιτυχώς! Τώρα ας δούμε περισσότερες λεπτομέρειες σχετικά με το τι υπάρχει στο έργο και πώς λειτουργεί.

Πρώτον, εδώ είναι μια γρήγορη αναδρομή στη δομή αρχείων του έργου μας:

  • index.html - το κύριο αρχείο HTML
  • package.json - περιέχει όλα τα πακέτα npm για εγκατάσταση κατά την εκτέλεση npm install.
  • gulpfile.js - περιέχει το config και εκτελεί όλες τις εργασίες Gulp
  • / app - φάκελος εργασίας, θα επεξεργαστείτε αρχεία SCSS / JS εδώ
  • / dist - Η Gulp θα εξάγει αρχεία εδώ, μην επεξεργάζεστε αυτά τα αρχεία

Στη ροή εργασίας σας, θα επεξεργαστείτε τα αρχεία HTML, SCSS και JS. Στη συνέχεια, ο Gulp θα εντοπίσει τυχόν αλλαγές και θα συγκεντρώσει τα πάντα. Στη συνέχεια, θα φορτώσετε τα τελικά αρχεία CSS / JS από το /distφάκελο στο index.htmlαρχείο σας .

Τώρα που τρέχουμε το Gulp, ας ρίξουμε μια πιο προσεκτική ματιά στον τρόπο λειτουργίας του Gulp.

Τι ακριβώς υπάρχει στο gulpfile.js;

Ακολουθεί μια αναλυτική εξήγηση για κάθε ενότητα του gulpfile και τι κάνουν:

Βήμα 1: Αρχικοποιήστε τις μονάδες npm

Στην κορυφή του gulpfile.js, έχουμε ένα σωρό σταθερές που εισάγουν τα πακέτα npm που εγκαταστήσαμε νωρίτερα, χρησιμοποιώντας τη require()συνάρτηση.

Δείτε τι κάνουν τα πακέτα μας:

Πακέτο Gulp:

  • gulp- τρέχει τα πάντα στο gulpfile.js. Είμαστε εξαγωγείς ακριβώς τις λειτουργίες συγκεκριμένων γουλιά ότι θα χρησιμοποιείτε, όπως src, dest, watchκαι άλλοι. Αυτό μας επιτρέπει να καλέσουμε αυτές τις λειτουργίες απευθείας χωρίς το gulp, για παράδειγμα μπορούμε απλά να πληκτρολογήσουμε src()αντί gulp.src().

Πακέτα CSS:

  • gulp-sourcemaps - χαρτογραφεί τα στυλ CSS στο αρχικό αρχείο SCSS στα εργαλεία προγραμματιστή του προγράμματος περιήγησής σας
  • gulp-sass - μεταγλωττίζει SCSS σε CSS
  • gulp-postcss - τρέχει autoprefixer και cssnano (δείτε παρακάτω)
  • autoprefixer - προσθέτει προθέματα προμηθευτή στο CSS
  • cssnano - ελαχιστοποιεί το 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

Όλος ο κώδικας που έχω δείξει εδώ είναι από ένα αποθετήριο GitHub που έχω για boilerplate front-end. Έχει σχεδιαστεί ως ένα γρήγορο κιτ εκκίνησης για οποιοδήποτε απλό έργο ιστοτόπου.

Μπορείτε να το ελέγξετε, να το προσαρμόσετε και να το χρησιμοποιήσετε για τα δικά σας έργα!

Δείτε το αποθετήριο GitHub εδώ.

Κλείνοντας

Ελπίζω ότι βρήκατε αυτήν την αναλυτική περιγραφή του πώς να βοηθήσετε το Gulp 4 να τρέχει!

Αν σας άρεσε αυτή η ανάρτηση ή έχετε κάποια ερώτηση, μη διστάσετε να αφήσετε ένα σχόλιο παρακάτω! ;

Θέλουν περισσότερα?

; Διαβάστε περισσότερα σεμινάρια στο blog μου, coder-coder.com.

; Εγγραφείτε εδώ για να λάβετε μηνύματα ηλεκτρονικού ταχυδρομείου σχετικά με νέα άρθρα.

; Γίνετε μέλος 24.000+ ατόμων - Ακολουθήστε το @thecodercoder στο Instagram.

; Δείτε τα σεμινάρια κωδικοποίησης στο κανάλι μου στο YouTube.