Setting up a CSS build process with Gulp

What is a build process?
It’s mostly just a sequence of tasks that are performed automatically and generate the files ready to be deployed.
We are going to implement a CSS build process that will compile Sass, prefix and compress our CSS.

Why Sass?
CSS is getting more powerful day by day, there are many CSS methodologies (I wrote an article about CSS methodologies if you want to go deep in the argument) that help us to write more maintainable and scalable CSS code, but these methodologies alone aren’t enough to solve the problem of maintaining large CSS codebases.
That’s where Sass comes into play. Sass provides us features that regular CSS doesn’t have, using Sass we can write more readable, maintainable and reusable CSS code.

Sass has become the most used CSS pre-processor in the front-end universe. Also some of the best front-end frameworks like Bootstrap and Foundation have been developed with Sass.
Sass lets you use many interesting functionalities like variables, nested syntax, mathematical operations, mixins, loops, functions, imports and more.

The packages
To develop our process we need to use some packages, let’s see together which one we will use and how they work.

gulp: is the core of our process and as they write on their website “Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something”. Gulp has a lot of very useful functionalities, in this case, we will use only a few:

• gulp.src(): usually, it is a string that is the path of the specific file to read;
• gulp.dest(): usually, it is a string that would be the destination path of the file once it will be processed;
• gulp.watch(): it allows watching files and running the functions when a change occurs;
• gulp.parallel(): it will execute the functions simultaneously;

gulp-sass: Sass is a preprocessor and to run in the browsers it needs to be compiled into CSS, that’s why we need gulp-sass, this gulp plugin will compile the Scss files into CSS.
gulp-autoprefixer: this plugin is very useful because it allows us not to think about the CSS prefixes anymore.
gulp-clean-css: this plugin is essential before deploying your website, because it will take your CSS file and will compress it in .min.css file, reducing extremely size of the file.
gulp-purgecss: this is one of the most important because it will reduce the size of your CSS file removing all the unused styles.
gulp-rename: this gulp plugin is useful if we want to change the extension file names.
BrowserSync: is an automation tool that makes web development faster, it has many useful functionalities, in our case, we will use:

• server that will run a static server;
• browserSync.stream() is very useful for the CSS because it will change the CSS LIVE without to refresh the page;
• browserSync.reload() that will reload the page automatically.

To check the code of the build process, check the article on Medium. 👇🏻

Setting up a CSS build process with Gulp | by Luca Spezzano | NotOnlyCSS | Medium

Luca Spezzano ・ Nov 19, 2020 ・ 5 min read

Medium