Використання 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 - це інструмент, який виконуватиме для вас різні завдання у процесі веб-розробки. Його можна назвати пакетом, інструментом побудови або запуском завдань. Всі вони означають приблизно одне і те ж.

Подібними інструментами є Webpack та Grunt (хоча Grunt швидко застаріває).

Ось, що ми будемо робити для нас Gulp:

  1. Скомпілюйте наші файли Sass у CSS
  2. Додайте префікси постачальника до нашого CSS
  3. Зменште наш остаточний файл CSS
  4. Об’єднайте (тобто об’єднайте) наші файли JS
  5. Зневажніть наш остаточний файл JS
  6. Перемістіть остаточні файли CSS / JS у нашу /distпапку.

Досить круто, правда ?!

Отже, як це працює, усі ваші налаштування та завдання зберігаються у gulpfile.jsфайлі. І ви запускаєте Gulp у своєму командному рядку.

Чудова частина цього полягає в тому, що після того, як ви налаштували файл gulp, ви можете легко використовувати його для інших проектів. Тож це величезна економія часу!

Перейдемо до встановлення та налаштування Gulp на вашому комп’ютері.

Встановлення Gulp за допомогою робочого демо-проекту

Перш ніж ви зможете запустити Gulp, вам потрібно встановити кілька речей:

  • Встановіть Node.js, якщо у вас його ще немає.
  • Встановіть утиліту командного рядка Gulp, запустивши npm install --global gulp-cli.

Після того, як ви запустите Gulp, ознайомтеся з демо-проектом, який я створив, який використовує Gulp! Це інтерфейсний шаблонний проект, який мав стати швидким способом для мене почати роботу з будь-яким простим інтерфейсним веб-сайтом.

(У мене також є багато фрагментів коду в решті цього підручника, так що ви можете просто звернутися до них також!)

Щоб налаштувати проект інтерфейсного шаблону:

  • Клонуйте або завантажте репозиторій Git цього проекту на свій комп’ютер.
  • Відкрийте проект і у кореневій папці проекту перейдіть до командного рядка та запустіть npm install. Це встановить пакети npm, перелічені у package.jsonфайлі, зокрема Gulp 4.

Тепер вам слід налаштувати файли проекту та встановити всі пакунки npm, які ми використовуватимемо для запуску завдань Gulp.

Оскільки файли з репозиторію готові до роботи, якщо ви введете в 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 - містить конфігурацію та запускає всі завдання 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- запускає все в gulpfile.js. Ми експортуємо тільки ті функції , специфічний ковток , що ми будемо використовувати, як src, dest, watchта інші. Це дозволяє нам викликати ці функції безпосередньо без gulp, наприклад, ми можемо просто ввести src()замість gulp.src().

Пакети CSS:

  • gulp-sourcemaps - відображає стилі CSS назад до вихідного файлу SCSS у засобах розробки вашого браузера
  • gulp-sass - компілює SCSS в CSS
  • gulp-postcss - запускає автопрефікс і 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

All the code I’ve displayed here is from a GitHub repository I have for front-end boilerplate. It’s meant as a quick starter kit for any simple front-end website project.

You’re welcome to check it out, customize, and use it for your own projects!

Check out the GitHub repository here.

In closing

I hope that you’ve found this walk-through of how to get Gulp 4 running helpful!

If you enjoyed this post or have a question, feel free to leave a comment below! ?

Want more?

? Read more tutorials on my blog, coder-coder.com.

? Sign up here to get emails about new articles.

? Join 24,000+ others — Follow @thecodercoder on Instagram.

? Check out coding tutorials on my YouTube channel.