Gulp provides a great number of tools for easy file processing. Most of the functions we've covered in previous lessons, but they all work on the files themselves and don't do any conversion. For example, Gulp has no built-in function to translate SASS to CSS, which is exactly what you'd want to see in such a tool.
And there's no contradiction here; Gulp really only provides a platform, a “kernel” around which we can build various data manipulations.
In this tutorial, we'll look at a few basic plugins that will help layout designers when working with Gulp. We'll look at how to set them up and use them in our work.
Third-party plugins for Gulp are the npm-packages we know and love. Therefore, their installation is no different. All you need to do is install the package and plug it in at the beginning of the gulpfile.js that's been created.
The most convenient option to search for packages is to use npmjs.com. For example, if you want to find a handler for SASS files, you can search for it with two keywords:
and search for the most popular package. Why is this the most popular one? Most likely, these packages have detailed documentation and the major critical bugs have been fixed. It's also important to keep track of when the package was last updated. Yes, there are packages that work fine and don't need to be updated, but they're the exception rather than the rule. Frequent updates often show that developers are watching for feedback and fixing critical issues.
Note that: in addition to the plugin for Gulp most cases require an interpreter/compiler as well. For example, to process SASS, not only do you need a special package for Gulp, but also a SASS package
To handle files created with the SASS preprocessor, wei have a package called gulp-sass. This is a popular package that's updated along with updates to the preprocessor itself. To use it, you need to install two packages:
sass
— the main SASS compilergulp-sass
— the plugin for GulpYou can install everything with a single command:
npm install sass gulp-sass --save-dev
File processing is simple, so, based on the existing structure we have been working with throughout the course, let's add SASS compilation to CSS. As mentioned, this is done in several steps: plugging the package and adding it to the pipe
chain of functions:
const { src, dest } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const buildSass = () => {
console.log('Compiling SASS');
return src('src/sass/*.scss')
.pipe(sass())
.pipe(dest('build/styles/'));
}
exports.build = buildSass;
You can process Pug in Gulp using the popular plugin gulp-pug. Have you noticed that the most popular plugins even have similar names? :)
Installing it and using it follows exactly the same approach as the gulp-sass plugin. To use it, the pug package and gulp-pug needs to be installed. This can be done in one line:
npm install gulp-pug --save-dev
File processing also follows the structure you're familiar with: open, process, and write the file. Let's combine the functions using a parallel
function within a single build
task:
const { src, dest, parallel } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const pug = require('gulp-pug');
const buildSass = () => {
console.log('Compilation SASS');
return src('src/sass/*.scss')
.pipe(sass())
.pipe(dest('build/styles/'));
}
const buildPug = () => {
console.log('Compilation Pug');
return src('src/pages/*.pug')
.pipe(pug())
.pipe(dest('build/'));
}
exports.build = parallel(buildSass, buildPug);
Note that: in most cases, additional parameters are available in the handler functions, such as pug()
and sass()
from the examples above, which allow you to make fine-tuned compilation settings. Always pay attention to the available parameters
The browser-sync plugin, while not a handler in the usual sense, performs one of the most useful functions in Frontend development: automatically updating the browser window when functions are executed. You can choose which actions you want the refresh to take.
It's browser-sync that makes it possible to deploy a conditional working environment where you don't have to worry about compiling files and updating your browser. Everything will happen on the fly.
To use browser-sync you just need to install the package with the same name. It's not only suitable for Gulp, but you can use it as a standalone package in any other project, so there's no special version for Gulp.
npm install browser-sync --save-dev
First, using the plugin, let's create a local server. To do this, connect the plugin and initialize it with the server
parameter:
const browserSync = require('browser-sync').create();
const browserSyncJob = () => {
browserSync.init({
server: "build/"
});
};
exports.server = browserSyncJob;
Now, when we start the server
task, a special local server will be started, the root of which will be the build/ directory of our project. After launching, you can go to the address specified in the Local
or External
.
The browser-sync
package has another useful method, .stream()
, which allows you to automatically call the local server and reload it. This operation, in most cases, is added to the very end of the function inside the pipe()
. To demonstrate this, let's complete the example with SASS and Pug, handling by adding the line .pipe(browserSync.stream())
to the end of each function:
const { src, dest, parallel } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const pug = require('gulp-pug');
const browserSync = require('browser-sync').create();
const browserSyncJob = () => {
browserSync.init({
server: "build/"
});
};
const buildSass = () => {
console.log('Compilation SASS');
return src('src/sass/*.scss')
.pipe(sass())
.pipe(dest('build/styles/'))
.pipe(browserSync.stream());
}
const buildPug = () => {
console.log('Compilation Pug');
return src('src/pages/*.pug')
.pipe(pug())
.pipe(dest('build/'))
.pipe(browserSync.stream());
}
exports.server = browserSyncJob;
exports.build = parallel(buildSass, buildPug);
Now, as a final step, you need to add watchers to perform compilation when files are changed. But what's the best way to do it? A good option is to add watch()
functions inside the server creation task, i.e., in the browserSyncJob()
. It'll first start the server and then the watchers, which will keep track of all the changes to the files.
const browserSyncJob = () => {
browserSync.init({
server: "build/"
});
watch('src/sass/*.scss', buildSass);
watch('src/pages/*.pug', buildPug);
};
The Hexlet support team or other students will answer you.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.
Programming courses for beginners and experienced developers. Start training for free
Our graduates work in companies:
Sign up or sign in
Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.